小程序swiper带切换按钮

最新推荐文章于 2025-06-06 09:45:24 发布

寒冰射手杨百亿

最新推荐文章于 2025-06-06 09:45:24 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 javascript css

本文链接：https://blog.youkuaiyun.com/ybyshezhang/article/details/129263356

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序自带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