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

小程序官方文档中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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。