微信小程序之swiper自定义点

微信自带的swiper不支持点样式修改，如果用户界面设计的样式有变化，将很难自定义以下，提供一种方案来解决点样式自定义的问题如图：

大致思路就是隐藏默认swiper的点，然后自定义自己的dotview，并同步事件

！索引。wxml-view class=' swiper-container ' swiper autoplay=' { { autoplay } } ' circular=' { { true } } ' indicator-dots=' { { false } } ' current=' { { swiperCurrent } } ' vertical=' { { false } } ' bind change=' swi penge ' block wx : for=' { { imgUrls } } ' swiper-item image src=' { { item } } mode=' width fix '/image/swiper-item/block/swiactive ' : ' ' } } ' bind : tap=' OnDottap ' mark : index=' { { index } } '/view/block/view/index。 js页面({ data : { autoplay : true，swipercurrent : 0 0，imgUrls: [''，' '，' '，' '] }，swiperChange:函数{ let那=这个。setdata({ swipercurrent : e . detail。current })}，onDotTap(e){ this。setdata({ autoplay : false })；控制台。日志(e)；const { index }=e . mark//设置滚动这个。setdata({ swipercurrent : index，autoplay : true })；}})/**index.wxss**/.swiper-容器{位置：相对；} swiper { height: 300rpx背景-颜色：橙色；} swiper-item { height : 100%；宽度： 100%;背景-颜色：蓝色；} swiper-项目图像{宽度： 100%；高度： 100%;} swiper-item : th-child(1){底色：图表重复使用；} swiper-item : th-child(2){底色：红色；} swiper-item : th-child(3){底色： rebecazure} swiper-item : th-child(4){底色：青色；}.dots-container { position :绝对值；display : flex justice-内容中心：align-items:居中；bottom: 10rpx左侧：50%;转换：翻译(-50%)；/*背景-颜色：灰色；*/}.dot { height: 20rpx宽度： 20 rpx背景色-: # 9A9A9A；边界半径： 10 rpx左边距左left: 20rpxtransition:所有25秒盒子尺寸：边框盒子；border:1rpx纯白色；} .多特。活动{宽度： 40 rpx背景# fff } .dot:nth第(1)种类型{左边距-: 0；}