react自定义swiper滚动条

最新推荐文章于 2025-06-29 09:23:48 发布

行路-前端

最新推荐文章于 2025-06-29 09:23:48 发布

阅读量578

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端分享文章标签： react vue 前端小程序 javascript

本文链接：https://blog.csdn.net/ZHANGFENGGANG236/article/details/118930036

前端分享专栏收录该内容

9 篇文章

订阅专栏

react,自定义swiper滚动条

初始化数据

constructor(props) {
    super(props)
    this.state = {
        curIdx: 0,
        index: 0,
        data:[]
    }
  }

函数作用类似vue中数据绑定

handleSwiperChange = (e) => {
    const { current } = e.detail
    this.setState({
        curIdx: current,
        index: e.target.current
    })
  }

Swiper

<Swiper
  className='goodsid-swiper'                  
  circular
  autoplay={data.length==1?false:true}
  current={curIdx}
  duration={300}
  onChange={this.handleSwiperChange}
  >
  {
          data.map((item, idx) => {
            return (
              <SwiperItem
                onClick={this.navigateTo.bind(this, `/pages/item/espier-detail?id=${item.goodsId}&dtid=${item.distributor_id}`, item)}
                data-id={item.goodsId}
                key={`${idx}1`}
              >
              </SwiperItem>
              )
          })
   }         
</Swiper>

滚动条

{data.length > 1 && (
    <View className="slider-dot center cover dark circle" >
        {data.map((dot, dotIdx) =>
            <View
                className={classNames('dot', { active: curIdx === dotIdx })}
                key={`${dotIdx}1`}
            ></View>
        )}
    </View>
)}