修改微信小程序swiper点点点的层级以及样式或者定位

最新推荐文章于 2024-04-27 11:49:36 发布

大大。

最新推荐文章于 2024-04-27 11:49:36 发布

阅读量807

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43923808/article/details/125329872

版权

1.修改层级

  <swiper class="swipercss" 
                        bindchange="changeSwiper"
                        style="height:670rpx">
 <swiper >
//重点style没有scoped,
<style lang="less" >
.swipercss .wx-swiper-dot {
  z-index: -10;
}

.swipercss .wx-swiper-dot.wx-swiper-dot-active {
  z-index: -10;
}

.swipercss .wx-swiper-dots.wx-swiper-dots-horizontal {
  z-index: -10;

}
</style>

2.自定义点点样式

效果图如下：

 <swiper class="banana"
            wx:if="{{menus_page.length>0}}"
            indicator-dots="true"
            style="height:395rpx;"
            interval="{{interval}}"
            indicator-dots="#DFDFDF"
            indicator-active-color="#F2C04D"
            duration="{{duration}}">
   </swiper>


<style lang="less" >
.banana .wx-swiper-dot {
  width: 15rpx;
  height: 10rpx;
  border-radius: 4rpx;
  margin-right: 3rpx;
  margin-left: 3rpx;
  // margin-left: 2rpx;
}
.banana .wx-swiper-dot.wx-swiper-dot-active {
  // 选中的大小
  width: 28rpx;
  height: 10rpx;
  border-radius: 4rpx;
  // margin-right: 3rpx;
  // margin-left: 3rpx;
}

.banana .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-top: 60rpx;

  //这里可以改变左右位置
}
</style>