【自定義輪播圖】微信小程序自定義輪播圖無縫滾動

先試試效果，能夠經過設置參數調整樣式

微信小程序中的輪播圖能夠直接使用swiper組件，以下：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

可是爲了實現上圖的效果，中間一張圖片，而後兩遍的圖片都能顯示出來一點點，而且兩張圖片中間有空隙，因而開始自定義一個輪播圖組件。起名就叫作自定義輪播圖吧。

爲了方便後期使用，起初設計多個參數可調：

一、自動滾動開關

二、滾動一屏所須要的時間

三、兩次滾動事件的時間間隔

四、兩張圖片中間空隙寬度

五、左右兩邊新突出圖片的寬度

六、開始滾動回調事件

七、滾動結束回調事件

八、數據數組，好比圖片數組

####################################################

開始操做，首先須要在頁面上防止wxml代碼：

<view class='yxxrui-slider'>
<view style='overflow:hidden;'>
  <view bindtouchcancel="sliderTouchCancel" bindtouchstart='sliderTouchStart' bindtouchend='sliderTouchEnd' bindtouchmove='sliderTouchMove' style='width:{{yxxruiSliderData.totalWidth}}px;display:flex;transform:translate({{yxxruiSliderData.x}}px,0)'>
      <block wx:for="{{yxxruiSliderData.datas}}" wx:for-index="i">
        <view class="slider-item" style="padding-left:{{yxxruiSliderData.blankWidth}}px;">
          <form class="slider-form" bindsubmit="" report-submit="true" data-posttype="" data-posturl="" data-appId="">
            <button>
              <image class="slider-img" src="{{item}}"/>
            </button>
          </form>
        </view>
      </block>
    </view>
  </view>
  <view class="slider-indicate-dots">
    <block wx:for="{{yxxruiSliderData.indicateDots}}" wx:for-index="i">
      <view class="slider-indicate-dot {{i==yxxruiSliderData.curPage-1?'active':''}}">
      </view>
    </block>
  </view>
  </view>

############################################

寫好頁面元素以後，將下邊的wxss樣式寫進去：

 1 /*自定義輪播圖樣式 */
 2 .yxxrui-slider{
 3  display: block;
 4 }
 5 .yxxrui-slider .slider-item{
 6  position:relative;
 7  display:inline-block;
 8  width:100%;
 9  box-sizing:border-box;
10  overflow: hidden;
11  line-height: 0;
12 }
13 .yxxrui-slider .slider-form{
14  position:relative;
15  display:inline-block;
16  width:100%;
17 }
18 .yxxrui-slider .slider-img{
19  border-radius: 14px;
20  width:100%;
21  height: 180px;
22 }
23 .yxxrui-slider .slider-item button{
24  line-height: 0;
25  box-sizing: border-box;
26  -moz-box-sizing:border-box; /* Firefox */
27  -webkit-box-sizing:border-box; /* Safari */
28  padding-left: 0;
29  padding-right: 0;
30 }
31 .yxxrui-slider .slider-indicate-dots{
32  line-height: 0;
33  z-index:9999;
34  margin-top: -14px;
35  padding-bottom: 8px;
36  position: relative;
37  text-align:center;
38 }
39 .yxxrui-slider .slider-indicate-dot{
40  width:6px; 
41  height:6px;
42  background:rgba(255, 255, 255, 0.5);
43  display:inline-block;
44  margin-right:4px;
45  border-radius:100%;
46  line-height: 0;
47  box-sizing: border-box;
48 }
49 .yxxrui-slider .button-hover{
50  background: none;
51 }
52 .yxxrui-slider .slider-indicate-dot.active{
53  background: white;
54  width:16px;
55  border-radius:4px;
56 }

################################################

而後寫js代碼調用，當前頁面的js文件須要先引入：

1 var myslider = require('../../utils/yxxrui.slider.js');

在Page的onLoad方法中初始化輪播圖組件：

 1 myslider.initMySlider({  2       that:this,  3  datas: [  4         '../../img/1.jpg',  5         '../../img/2.jpg',  6         '../../img/3.jpg',  7         '../../img/4.jpg'
 8  ],  9       autoRun:true, 10       blankWidth : 12, 11       newImgWidth: 18, 12       interval:1500, 13       duration:200, 14       direction:'left', 15       startSlide:function(curPage){ 16         
17  }, 18       endSlide: function (curPage){ 19         
20  } 21     });

其中的yxxrui.slider.js代碼放到下一篇博客中，點這裏直達