您当前的位置:首页 > 计算机 > 编程开发 > 小程序

微信小程序 Swiper 自定义指示点样式

时间:12-14来源:作者:点击数:

微信小程序 Swiper 自定义指示点样式,默认情况下微信小程序的 Swiper 可以自定义样色,但是不能修改样式,根据 UI 设计的需要做成下面的样式:

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

.banner .wx-swiper-dot {
  width: 6px;
  display: inline-flex;
  height: 6px;
  margin-left: 2px;
  justify-content: space-between;
}

.banner .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px
}

.banner .wx-swiper-dot-active {
  width: 22px;
}

.banner .wx-swiper-dot-active::before {
  background: #FFF;
  width: 22px;
}
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐