WeChat applet carousel diagram swiper details and examples (source code download), swiper source code download

Explain the swiper diagram and examples of small program carousel (source code download) and swiper source code download

Small Program swiper carousel Diagram

Preface:

1. After v0.12 is updated, an open file window pops up for each save.

2. The indicator-dots attribute of the swiper component. If the value is false, the Panel indicator points are displayed. You need to delete the indicator-dots attribute directly.

The default swiper panel indicator points are black and gray, but this does not meet the needs of the majority of small partners, such as other colors, elliptical, square, etc ....

First of all, disable (delete directly) The swiper attribute indicator-dots and use the view component to simulate dots. The corresponding code is as follows:

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

Then the wxss code:

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

Then bind the corresponding event to the bindchange attribute of swiper:

Page({data: {  slider: [  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},  ......  ],  swiperCurrent: 0,},swiperChange: function(e){  this.setData({    swiperCurrent: e.detail.current  })}}) 

Effect preview:

Project address: http://xiazai.jb51.net/201701/yuanma/wx_qqmusic-master (jb51.netw..rar

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!