微信小程序实现轮播图指示器

本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下

1.文件目录

2.轮播图页面布局

需求:自定义轮播指示器:当轮播图发生变化时,自定义轮播指示器跟随图片发生对应改变

bindchange:current 改变时会触发 change 事件,即当图片索引发生变化时触发的事件

current:当前所在滑块的 index (number类型)

autoplay: 是否自动切换

interval: 自动切换时间间隔

circular: 是否采用衔接滑动

<view class="swiper"> <!-- bindchange:current 改变时会触发 change 事件-->   <swiper bindchange="change" autoplay interval="{{1500}}" circular>     <swiper-item wx:key="*this" wx:for="{{banners}}">       <image src="{{item}}" style="height: 150px;" />     </swiper-item>   </swiper>   <!-- 轮播图指示器 -->   <view class="dot">   <!--      index:小圆点的索引     current:图片的索引    -->     <text wx:key="this" wx:for="{{4}}"  class="{{index===current?'active':''}}"></text>   </view> </view>

3.轮播图样式文件

.swiper {   position: relative; } .dot {   display: flex;   justify-content: center;   position: absolute;   width: 100%;   height: 25rpx;   bottom: 20rpx; } .dot text {   width: 80rpx;   height: 25rpx;   border-radius: 20rpx;   background: peachpuff;   margin-right: 10rpx; } /* 小圆点高亮显示 */ .dot text.active{   background: red; }

4.轮播图逻辑实现

Page({   /**    * 页面的初始数据    */   data: {     // 用于记录小圆点的索引     current:0,     // 轮播图数据     banners: [       '../../assets/banners/01.webp',       '../../assets/banners/02.webp',       '../../assets/banners/03.webp',       '../../assets/banners/04.webp'     ]   },   // 图片切换处理事件   change(e) {     // e.detail.current:小圆点的索引     // 更新数据     this.setData({current:e.detail.current});   }  })

5.实现效果

推荐阅读