2022-06-25 06:14:06 来源 : 软件开发网
本文实例为大家分享了微信小程序实现轮播图指示器的具体代码，供大家参考，具体内容如下
1.文件目录
2.轮播图页面布局
(资料图)
需求：自定义轮播指示器：当轮播图发生变化时，自定义轮播指示器跟随图片发生对应改变
bindchange:current 改变时会触发 change 事件，即当图片索引发生变化时触发的事件
current：当前所在滑块的 index (number类型)
autoplay: 是否自动切换
interval: 自动切换时间间隔
circular: 是否采用衔接滑动
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.实现效果
关于我们 加入我们 广告服务 网站地图
All Rights Reserved, Copyright 2004-2020 www.830036.com
如有意见请与我们联系 邮箱：435 227 67@qq.com
营业执照公示信息