实用方法：自定义轮播图swiper dots默认样式

发布时间：2018-05-17 08:52 所属栏目：小程序开发教程

先吐槽下：

1.更新了v0.12的版本后，每次保存都弹出来一个打开文件窗口。
2.swiper组件的属性indicator-dots，值为false时，面板指示点还是显示。要把indicator-dots属性直接删掉。

下面进入正题：默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。。。。
首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下：

[HTML] 纯文本查看复制代码

<swiper-item>

</swiper-item>

</block>

</swiper>

</block>

</view>

然后是wxss代码：

[CSS] 纯文本查看复制代码

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .img{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

left: 0;

right: 0;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 8rpx;

width: 14rpx;

height: 14rpx;

background: #fff;

border-radius: 8rpx;

transition: all .6s;

}

.swiper-container .dots .dot.active{

width: 24rpx;

background: #f80;

}

再对swiper的bindchange属性绑定对应的事件：

[JavaScript] 纯文本查看复制代码

Page({

data: {

slider: [

{picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},

{picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},

{picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},

......

swiperCurrent: 0,

swiperChange: function(e){

this.setData({

swiperCurrent: e.detail.current

})

}

})

效果预览：

易优小程序（企业版）+灵活api+前后代码开源码云仓库:

本文地址：https://www.eyoucms.com/wxmini/doc/course/24450.html 复制链接如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

热门问题
最新问题

小程序模板网

实用方法：自定义轮播图swiper dots默认样式

产品

服务

帮助

关于