微信小程序实现轮播图指示器
本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下
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.jpg', '../../assets/banners/02.jpg', '../../assets/banners/03.jpg', '../../assets/banners/04.jpg' ] }, // 图片切换处理事件 change(e) { // e.detail.current:小圆点的索引 // 更新数据 this.setData({current:e.detail.current}); } })
5.实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)