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

发布于 2020-02-03 09:24:08 字数 849 浏览 3015 评论 0

微信小程序 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;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文