Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。
import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components';
import PropTypes from 'prop-types';
import './MySlider.scss';
export default class MySlider extends Component {
static propTypes = {
banner: PropTypes.array,
};
static defaultProps = {
banner: [],
};
state = {
current: 0
}
swiperChange = (e) => {
this.setState({
current: e.detail.current
})
}
render() {
const { banner } = this.props;
const { current } = this.state;
return (
<View className='wrapper'>
<Swiper
className='swiper-container'
circular
autoplay
onChange={ this.swiperChange }
current={ current }
>
{ banner.map((item, index) => (
<SwiperItem key={index}>
<Image className='swiper-img' mode='widthFix' src={item.src}></Image>
</SwiperItem>
))}
</Swiper>
<View className='pageState'>{current + 1}/{ banner.length }</View>
</View>
)
}
}
需要同时在组件上绑定current属性。

浙公网安备 33010602011771号