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

作者：模板之家 2018-5-17 08:51 8551人关注

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

先吐槽下：

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

})

}

})

效果预览：

路过

雷人

握手

鲜花

鸡蛋

原作者: 模板之家来自: 网络收集

上一篇：微信小程序运行流程看这篇就够了

下一篇：微信小程序学习用demo：日历：公历农历转换，calendar-convert

		自动登录	找回密码
密码			立即注册

搜索本站精品资源

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

全部回复(0)

相关分类