微信小程序实现轮播图指示器
作者：顾舟
这篇文章主要为大家详细介绍了微信小程序实现轮播图指示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现轮播图指示器的具体代码，供大家参考，具体内容如下
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.实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。