微信小程序自定义轮播图

本文实例为大家分享了微信小程序自定义轮播图展示的具体代码，供大家参考，具体内容如下

默认的捣蛋鬼面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。

首先当然是要禁用掉（直接删掉)swiper属性指示器点，再用视角组件模拟点，对应的代码如下：

view class=' swiper-container ' swiper autoplay=' auto ' interval=' 5000 ' duration=' 500 ' current=' { { swiper current } } ' bind change=' swiper ' class=' swiper ' block wx : for=' { { slider } } ' wx : key=' unique ' swiper-item image src=' http: { { item }。picurl } } ' class=' img '/image/swiper-item/block/swiper活动' : ' ' } } '/视图/块/视图/视图然后是页面样式表代码：

swiper-容器{位置：相对；}.瑞士集装箱swiper { height: 300rpx}。瑞士集装箱。斯威珀img { width : 100%；高度： 100%;}.瑞士集装箱。点{位置：绝对值；左： 0；右： 0；bottom : 20 rpxdisplay : flex justice-content center :}.瑞士集装箱。圆点。点{ margin: 0 8rpx宽度： 14 rpx高度： 14rpx背景# fffborder-radius : 8 rpx；transition: all .6s }。瑞士集装箱点。多特。活动{宽度： 24 rpx背景技术# f80}再对捣蛋鬼的绑定更改属性绑定对应的事件：

页面({ data : { slider :]{ picurl : '././images/t 003 r 720 x288 m 0000000 rvobr 3 XG 73f。jpg ' }，{ picUrl: '././images/t 003 r 720 x288 m 0000000 j6税0 wlwhd。jpg ' }，{ picUrl: '././images/t 003 r 720 x 288m 000000 a4ll k2vxvj。jpg ' }，]，swiperCurrent: 0，}，swiperCurrent:函数{这个。setdata({ swipercurrent : e . detail。当前})})效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。