Skip to content

M
mr-julyedu
Commit e3f562e0 by xuzhenghua
Options

首页轮播

parent d65e40c9
Showing with 138 additions and 117 deletions
package.json
......@@ -48,6 +48,7 @@
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-mobile-swiper": "^1.1.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
......
src/components/Index/animateTypes.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var DEFAULT = exports.DEFAULT = 'DEFAULT';
var ROLL = exports.ROLL = 'ROLL';
var CARD = exports.CARD = 'CARD';
console.log(DEFAULT,ROLL,CARD)
\ No newline at end of file
src/components/Index/createStyle.js 0 → 100644
Object.defineProperty(exports, "__esModule", {
value: true
});
var _animateTypes = require('./animateTypes');
var animateTypess = _interopRequireWildcard(_animateTypes);
var clientWidth = exports.clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
exports.default = function (animateTypes, stage, progress, duration) {
switch (animateTypes) {
case animateTypess.CARD:
switch (stage) {
case 'pre':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -(clientWidth * 0.92 + progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 2
};
case 'active':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + -progress + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.85) * 0.2)) + ')',
transitionDuration: duration + 's',
zIndex: 3
};
case 'next':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 0.92 - progress) + 'px) scaleY(' + (0.92 + Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'prePro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (-(clientWidth * 1.7) - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
case 'nextPro':
return {
width: '90%',
left: '20px',
transform: 'translateX(' + (clientWidth * 1.7 - progress) + 'px) scaleY(' + (1 - Math.abs(progress / (clientWidth * 0.92) * 0.2)) + ')',
transitionDuration: duration + "s",
zIndex: 1
};
default: break;
}
break;
default: break;
}
};
\ No newline at end of file
src/components/Index/index.scss
......@@ -31,42 +31,69 @@
margin-top: -6px;
}
}
.top-scroll {
touch-action: pan-y;
.index-swiper {
margin-top: 7px;
height: 168px;
position: relative;
.am-wingblank.am-wingblank-lg {
margin: 0;
}
img {
border-radius: 6px;
.swiper-container {
height: 100%!important;
.swiper-slide {
img {
width: 100%;
height: 168px;
border-radius: 6px;
}
}
}
.slider-decorator-0 {
position: absolute;
top: 125px;
.am-carousel-wrap {
text-align: right;
padding-right: 50px;
.swiper-pagination {
width: 100%;
left: 188px !important;
text-align: right;
padding-right: 55px;
.pagination-item{
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
}
.active {
width: 18px!important;
height: 7px!important;
border-radius: 4px!important;
background-color: $bg_fff !important;
opacity: 1;
}
}
}
/*热门推荐轮播*/
.category {
.swiper-container {
height: 106px !important;
margin-top: 15px;
margin-bottom: 5px;
touch-action: pan-y;
border-radius: 3px;
.scroll {
width: 100%;
margin-left: 0 !important;
margin-top: 12px;
margin-bottom: 5px;
touch-action: pan-y;
.swiper-pagination {
bottom: 5px !important;
.pagination-item {
width: 8px !important;
height: 8px !important;
background-color: $bg_fff !important;
opacity: 0.5;
}
.active {
background-color: $bg_fff !important;
opacity: 1;
}
}
}
}
/*
页面tab
*/
......@@ -296,6 +323,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: rgba(0, 0, 0, .6);
.live-room-content {
......@@ -565,23 +593,28 @@
margin-top: 20px;
}
}
.server-content {
height: 226px;
padding: 20px;
.title {
font-size: 18px;
color: $active;
height: 24px;
line-height: 24px;
i{
i {
font-size: 24px;
margin-right: 10px;
}
span {
position: relative;
top: -3px;
}
}
.dec {
height: 53px;
}
......
src/components/Index/scroll.js deleted 100644 → 0
import React, {Component} from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
export default class Scroll extends Component {
render() {
return (
<WingBlank className='scroll'>
<Carousel
autoplay={true}
infinite
>
{this.props.data.map(val => (
<a
key={val}
href="http://www.baidu.com"
style={{ display: 'inline-block', width: '100%', height: this.props.height}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
);
}
}
src/components/Index/topscroll.js deleted 100644 → 0
import React, {Component} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
export default class Topscroll extends Component {
state = {
slideIndex:0
}
render() {
return (
<div className='top-scroll'>
<WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
dotActiveStyle={{
width: '18px',
height: '8px',
background: '#fff',
borderRadius: '4px',
}}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.props.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -6 : 0,
height: this.state.slideIndex === index ? this.props.actheight : this.props.height,
}}
>
<img
src={val.src}
alt=""
style={{ width: '100%', verticalAlign: 'top', height: '100%' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
// this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
</div>
);
}
}
yarn.lock
......@@ -8593,6 +8593,13 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-mobile-swiper@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/react-mobile-swiper/-/react-mobile-swiper-1.1.4.tgz#8b27359736254e54a663b1db79af622488195400"
integrity sha512-I4CZIh5muXaKInhsS/CcGYLZt9AZIb4CSgvIVnDUDrfzJSsZBh6AMPf3hQmHQFcAjDNxReCmOcrXzvwAlRDrVA==
dependencies:
prop-types "^15.7.2"
react-native-swipeout@^2.2.2:
version "2.3.6"
resolved "https://registry.yarnpkg.com/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment