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属性。

转载于:https://www.cnblogs.com/liyinSakura/p/10419197.html