美文网首页
小程序swiper指示点样式自定义

小程序swiper指示点样式自定义

作者: FE晓伟哥 | 来源:发表于2019-03-14 14:25 被阅读0次

小程序官方文档中swiper组件的指示点默认是圆的,只能通过其组件属性修改指示点颜色,如要更改指示点形状可通过了解swiper组件指示点的类,对其样式进行修改,也可以通过view手写该指示点效果,这里我只演示手写的view指示点!(可维护性高)废话不多说,直接上代码!

wxml:

这里我跟swiper组件是兄弟元素

<swiper class='' current="{{currentIndex}}" bindchange="swiperChange" style="height:{{imgheights[currentIndex]}}rpx;" >

    <block wx:for='{{imgList}}' wx:key="{{index}}">

        <swiper-item class='swiper-item'>

            <image src='{{item}}' mode="widthFix" data-id="{{index}}" bindload="imageLoad" />

        </swiper-item>

    </block>

</swiper>
<view class="indication">

    <block wx:for="{{imgList}}" wx:key="imgList">

        <view class="spot{{index == currentIndex? ' active' : ''}}"></view>

    </block>

</view>

wxss:

/* 自定义轮播指示点样式 */

.indication{

  width: 400rpx;

  height: 36rpx;

  position: absolute;

  bottom: 0;

  display:flex;

  flex-direction:row;

  align-items:center;

  justify-content:center;

}

/* 未选中指示点样式 */

.spot{

  width: 12rpx;

  height: 10rpx;

  border-radius: 50%;

  margin-right: 26rpx;

  background-color: #80d1ff;

}

/*选中指示样式 */

.spot.active{

  width: 22rpx;

  height: 10rpx;

  border-radius: 6rpx;

  background-color: #fff;

}

js:


data: {

    imgList: ['/images/a.png', '/images/b.png'],

    currentIndex:0,

},

swiperChange: function (e) {

    this.setData({

      currentIndex: e.detail.current

    })

}

最终效果演示:

image

相关文章

网友评论

      本文标题:小程序swiper指示点样式自定义

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