博客

问题

想实现下面这种样式：



方案一：需要隐藏indicator-dots，自己自定义一个dot，不打算采用这种方法。

方案二：自定义indicator-dots样式。

实现方法： 通过改变.wx-swiper-dots 和.wx-swiper-dot 的样式来修改。

注意：

如果你的swiper是component组件，在swiper.wxss里面写.wx-swiper-dots 和.wx-swiper-dot样式是不会生效的，一定要在父组件的.wxss里面写！！！

实现代码如下：

//swiper.wxml
<view >
  <swiper indicator-dots="{{true}}" indicator-color="rgba(0, 170, 250, 0.1)" indicator-active-color="#00AAFA"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper">
    <block wx:for="{{allImg}}" wx:key="*this">
      <swiper-item class="swiper_wrap">
        <block wx:for="{{item.imgs}}" wx:key="*this">
          <image src="{{item}}" class="swiper-item" mode="aspectFill"></image>
        </block>
      </swiper-item>
    </block>
  </swiper>
</view>

/* 在main.wxss中写  main.wxml引入swiper组件 */
/* 修改dot形状 */
swiper .wx-swiper-dots .wx-swiper-dot{
  width: 40rpx;    
  height: 6rpx;  
  border-radius: 4rpx;  
}
/* 修改dot之间的间距 */
swiper .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2) {
  margin-left: 8rpx;
} 

注意哈，想实现上面的一行显示多个图片的，swiper有一个属性可以直接用：display-multiple-items=“4”，但是不太好用，因为下面的指示点数量就不对了，如下图：

所以修改一下img的结构，两层循环来实现。