微信小程序-灵活修改swiper组件面板指示点（indicator-dots）的内部样式

关于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": "首页"
}

实现效果：

实现效果

demo下载链接：

https://github.com/w-wh/wx-indicator-dots-demo