欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序自定义轮播图

程序员文章站 2024-03-30 21:24:45
本文实例为大家分享了微信小程序自定义轮播图展示的具体代码,供大家参考,具体内容如下 默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色...

本文实例为大家分享了微信小程序自定义轮播图展示的具体代码,供大家参考,具体内容如下

默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等。

首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下:

<view class="swiper-container">
 <swiper autoplay="auto" interval="5000" duration="500" current="{{swipercurrent}}" bindchange="swiperchange" class="swiper">
 <block wx:for="{{slider}}" wx:key="unique">
  <swiper-item>
  <image src="{{item.picurl}}" class="img"></image>
  </swiper-item>
 </block>
 </swiper>
 
 <view class="dots">
 <block wx:for="{{slider}}" wx:key="unique">
  <view class="dot{{index == swipercurrent ? ' active' : ''}}"></view>
 </block>
 </view>
</view>

然后是wxss代码:

swiper-container{
 position: relative;
}
.swiper-container .swiper{
 height: 300rpx;
}
.swiper-container .swiper .img{
 width: 100%;
 height: 100%;
}
.swiper-container .dots{
 position: absolute;
 left: 0;
 right: 0;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 margin: 0 8rpx;
 width: 14rpx;
 height: 14rpx;
 background: #fff;
 border-radius: 8rpx;
 transition: all .6s;
}
.swiper-container .dots .dot.active{
 width: 24rpx;
 background: #f80;
}

再对swiper的bindchange属性绑定对应的事件:

page({
data: {
 slider: [
 {picurl: '../../images/t003r720x288m000000rvobr3xg73f.jpg'},
 {picurl: '../../images/t003r720x288m000000j6tax0wlwhd.jpg'},
 {picurl: '../../images/t003r720x288m000000a4llk2vxxvj.jpg'},
 ],
 swipercurrent: 0,
},
swiperchange: function(e){
 this.setdata({
  swipercurrent: e.detail.current
 })
}
})

效果图:

微信小程序自定义轮播图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。