【微信小程序】swiper自定义样式：指示点样式 wx-swiper-dot-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】swiper自定义样式：指示点样式 wx-swiper-dot。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

调试基础库：2.26.0

swiper

    <view class="swiper">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>

swiper 样式

.wx-swiper-dots ：指示点容器样式
.wx-swiper-dots-horizontal ：水平滑动的指示点容器样式，其在.wx-swiper-dots内。
.wx-swiper-dot ：指示点样式
.wx-swiper-dot-active ：当前指示点样式

指示点颜色

默认指示点颜色
小程序swiper指示点样式,微信小程序,微信小程序,小程序
改变指示点颜色

.swiper .wx-swiper-dot {
  background-color: rgba(255,255,255,0.7);
}
.swiper .wx-swiper-dot-active {
  background-color:#ff4e5b;
}

小程序swiper指示点样式,微信小程序,微信小程序,小程序

指示点形状

默认指示点形状
小程序swiper指示点样式,微信小程序,微信小程序,小程序
改变指示点形状

.swiper .wx-swiper-dots-horizontal .wx-swiper-dot {
  width: 45rpx;
  height: 8rpx;
  border-radius: 5rpx;
}

小程序swiper指示点样式,微信小程序,微信小程序,小程序

指示点位置

默认指示点位置贴近底部
小程序swiper指示点样式,微信小程序,微信小程序,小程序
改变指示点位置

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  bottom: 40rpx;
}

.wx-swiper-dots.wx-swiper-dots-horizontal，注意中间，没有空格

或者

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 40rpx;
}

.wx-swiper-dots.wx-swiper-dots-horizontal，注意中间，没有空格

参考

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
https://blog.csdn.net/qq_39399966/article/details/113342668
https://blog.csdn.net/IT_iosers/article/details/123922736
https://wangjiabin.blog.csdn.net/article/details/108194235
https://blog.csdn.net/weixin_42063951/article/details/111059699文章来源地址https://www.toymoban.com/news/detail-519237.html

到了这里，关于【微信小程序】swiper自定义样式：指示点样式 wx-swiper-dot的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！