小程序swiper带切换按钮

最新推荐文章于 2025-10-22 15:58:34 发布

原创

最新推荐文章于 2025-10-22 15:58:34 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #css

本文介绍了小程序中Swiper组件的使用，包括设置同时显示的滑块数量、切换动画时间、监听滑动事件以及实现循环滑动等功能。

小程序自带swiper组件，

display-multiple-items 同时显示的滑块数量
current：当前所在滑块的 index
duration：切换需要花的时间一般为1秒
bindchange：current发生改变触发
bindanimationfinish：动画结束时触发
circular 是否采用衔接滑动

      <view class="swiperCont">
        <view class="activeBtn1" bindtap="toLeft"></view>
        <view class="activeBtn2" bindtap="toRight"></view>

        <swiper current="{
    
    {currentIndex}}" circular="true" duration="1000" bindchange="changeIndex" bindanimationfinish="changeFinish" display-multiple-items="4">
          <swiper-item wx:for="{
    
    {[1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}}" wx:key="index" bindtap="openPop" data-type="choose" data-ind="index">
            <view