微信小程序swiper组件小圆点样式更改

2020年7月17日更新一下,
今天发现这个方法要改一下。
把类选择器.swiper 改成标签选择器swiper就好了。
下面的代码也改过来了


可以直接打开官方组件的示例代码,在index.wxss中增加以下这段就搞明白了。
可以直接点击官方示例代码链接去尝试,前提是你已经安装了微信开发者工具
点这里:

微信截图_20190110145753.png

/* 设置点点的层级 ,可以调整小点的位置*/
swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  top: 250rpx;
  /* left: 500rpx; */
  /* z-index可设可不设*/
  z-index: 999;
}
 
/* 设置点点的样式 */
swiper .wx-swiper-dot {
  width: 35rpx;
  height: 7rpx;
  display: inline-flex;
  /* 这里设置点点之间的距离 */
  margin-left: 19rpx;
  justify-content: space-between;
}
 
 /* 当前点点的样式 */
swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #ffffff;
}
 
/* 当前点点的样式 */
swiper .wx-swiper-dot-active::before {
  background: #ff0000;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容