关于swiper的用法可以参考官方文档：swiper组件。
本文主要介绍如何修改swiper组件的内部样式，这些通过组件属性是无法修改的。
原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/21899133307d
场景：
项目中可能会要求轮播图的指示点形状、间距和位置有所改变（至于颜色，可以通过属性直接修改），像下面这样：
改形状
改间距
调位置
解决方案：
有两种方式可以实现上述效果，一种是自己写组件，可以针对指示点单独写一个组件，嵌到swiper组件上（或者直接在swiper组件上扩展标签，本质都是一样的），这种方式我们不做讨论；另一种是通过修改swiper组件上的内部样式来实现，也是我们这里要介绍的。下面就具体介绍下如何解决：
小程序内部有两个类选择器负责修饰“指示点”的样式，分别是 .wx-swiper-dots 和 .wx-swiper-dot。
其中 .wx-swiper-dots 是负责面板指示点的整体样式, .wx-swiper-dot 是负责面板指示点中的一个点的样式。也就是说 .wx-swiper-dots 修饰的是父标签，.wx-swiper-dot 修饰的是子标签。
所以只需要重写 .wx-swiper-dots 和 .wx-swiper-dot 这两个类选择器就可以灵活的修改swiper组件面板指示点的形状、间距和位置。具体解决方案如下（dot表示面板指示点中的一个点，dots表示面板指示点的整体）：
-
修改dot形状：
/* 修改dot形状 */ .wx-swiper-dots .wx-swiper-dot{ width: 40rpx; /*宽*/ height: 10rpx; /*高*/ border-radius: 4rpx; /*圆角*/ } -
修改dot之间的间距：
/* 修改dot之间的间距 */ .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) { margin-left: 30rpx; } -
调成dots的位置：
/* 调成dots的位置 */ /* 顶部 */ .wx-swiper-dots.wx-swiper-dots-horizontal { top: 40rpx; } /* 中间 */ .wx-swiper-dots.wx-swiper-dots-horizontal { top: 50%; } /* 右下角 */ .wx-swiper-dots.wx-swiper-dots-horizontal { width: 90%; text-align: right; } /* 左下角 */ .wx-swiper-dots.wx-swiper-dots-horizontal { width: 90%; text-align: left; } /* 左上角 */ .wx-swiper-dots.wx-swiper-dots-horizontal { top: 40rpx; width: 90%; text-align: left; } /* 右上角 */ .wx-swiper-dots.wx-swiper-dots-horizontal { top: 40rpx; width: 90%; text-align: right; }
注意：这里调整dots位置的代码只适用于vertical属性默认为false的时候，如果vertical属性设置为true，.wx-swiper-dots-horizontal 这个选择器需要改为 .wx-swiper-dots-vertical，并且代码需要做相应修改。其实重写样式的时候 .wx-swiper-dots-horizontal 这个选择器可有可无，我这里这样写只是为了方便理解，表示上面这些代码只适用于默认情况（vertical属性为false时）。vertical为true的情况可以根据上面的代码举一反三。
vertical属性
上面这些总结参考了下面这两篇文章：
https://blog.csdn.net/qq_33030043/article/details/88077797
http://www.qianduan8.com/1009.html
具体实现：
至于如何实现，上面已做分析。下面直接贴出写好的demo源码和实现效果以及demo下载链接：
home.wxml:
<!--pages/home/home.wxml-->
<view class='title'>修改dot之间的间距:</view>
<view class='spacing'>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="{{3000}}"
duration="{{500}}"
circular="{{true}}"
indicator-active-color="#28A5F6"
style="height:{{400}}rpx;">
<block wx:for="{{imgUrls}}" wx:key="{{key}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
</view>
<view class='title'>修改dot的形状:</view>
<view class='shape'>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="{{3000}}"
duration="{{500}}"
circular="{{true}}"
indicator-active-color="#28A5F6"
style="height:{{400}}rpx;">
<block wx:for="{{imgUrls}}" wx:key="{{key}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
</view>
<view class='title'>调整dots的位置:</view>
<view class='location'>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="{{3000}}"
duration="{{500}}"
circular="{{true}}"
indicator-active-color="#28A5F6"
style="height:{{400}}rpx;">
<block wx:for="{{imgUrls}}" wx:key="{{key}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
</view>
home.wxss:
.spacing swiper-item image, .shape swiper-item image, .location swiper-item image {
width: 750rpx;
height: 400rpx;
}
/* 修改dot之间的间距 */
.spacing .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
margin-left: 30rpx;
}
/* 修改dot形状 */
.shape .wx-swiper-dots .wx-swiper-dot{
width: 40rpx; /*宽*/
height: 10rpx; /*高*/
border-radius: 4rpx; /*圆角*/
}
/* 调成dots的位置 */
/* 顶部 */
/* .location .wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
} */
/* 中间 */
/* .location .wx-swiper-dots.wx-swiper-dots-horizontal {
top: 50%;
} */
/* 右下角 */
.location .wx-swiper-dots.wx-swiper-dots-horizontal {
width: 90%;
text-align: right;
}
/* 左下角 */
/* .location .wx-swiper-dots.wx-swiper-dots-horizontal {
width: 90%;
text-align: left;
} */
/* 左上角 */
/* .location .wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
width: 90%;
text-align: left;
} */
/* 右上角 */
/* .location .wx-swiper-dots.wx-swiper-dots-horizontal {
top: 40rpx;
width: 90%;
text-align: right;
} */
home.js:
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'../../static/images/banner1.jpg',
'../../static/images/banner2.jpg',
'../../static/images/banner3.jpg',
'../../static/images/banner4.jpg',
'../../static/images/banner5.jpg'
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
home.json:
{
"usingComponents": {},
"navigationBarTitleText": "首页"
}
实现效果：
实现效果
网友评论