微信小程序轮播图指示点自定义(修改原生指示点样式)

53 篇文章 34 订阅
43 篇文章 17 订阅

1.实现效果

在这里插入图片描述

2.实现原理

修改swpier原生指示点的样式。

.wx-swiper-dots.wx-swiper-dots-horizontal
.wx-swiper-dot 
.wx-swiper-dot::before
.wx-swiper-dot-active

3.主要代码

css样式:

/* pages/dots/index2.wxss */
/*轮播图*/
swiper {
  height: 783rpx;
}
.swiper-item {
  border-radius: 0;
}
.slide-image {
  display: block;
  width: 100%;
  height: 783rpx;
}
/* 指示点距离底部的距离 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 110rpx;
  /* display: flex; */
}

.swiper-box .wx-swiper-dot {
  display: inline-flex;
  /*inline-flex表示 将对象作为内联弹性伸缩盒显示 等同于给父级元素添加display:flex*/
  margin-left: -8rpx;
  justify-content: space-between;
}

.swiper-box .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(255, 255, 255, 1);
  border-radius: 8rpx;
  width: 16rpx;
}

.swiper-box .wx-swiper-dot-active {
  width: 60rpx;
  border-radius: 8rpx;
  background: #fff;
  opacity: 0.57;
}

4.写在最后🍒

看完本文如果觉得有用,记得点赞+关注+收藏鸭 🍕
更多小程序相关,关注🍥苏苏的bug,🍡苏苏的github,🍪苏苏的码云~
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值