美文网首页
微信小程序swiper组件小圆点样式更改

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

作者: Kawing_Zhang | 来源:发表于2019-01-10 15:03 被阅读0次

    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;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序swiper组件小圆点样式更改

          本文链接:https://www.haomeiwen.com/subject/bhrarqtx.html