小程序無縫輪播組件（點擊查看，指示點，指示文字）

1.效果圖：

* 文件名自己定義，json引用就不寫了

2.組件代碼：

wxml:

<!--components/common-banner/common-banner.wxml-->
<swiper 
  indicator-dots="{{showDots}}"
  autoplay="{{autoPlay}}" 
  interval="{{interval}}" 
  duration="{{duration}}" 
  circular="{{true}}"
  indicator-color="{{dotsColor}}"
  indicator-active-color="{{activeDotsColor}}"
  bindchange="bannerChange"
>
  <div class="loading" wx:if="{{imgArr.length == 0}}">
    loading
  </div>
  <block wx:for="{{imgArr}}" wx:key="{{index}}">
    <swiper-item >
      <image src="{{item + '?x-oss-process=style/hd'}}" class="slide-image" mode='aspectFill' bindtap='previewImg'
      data-previewurl='{{imgArr}}' data-currenturl='{{item}}'/>
    </swiper-item>
  </block>
</swiper>

js：

/**
 * ！！！common-banner默認寬高100%，需再外部包一層<view>並設置寬高
 * showDots [Boolean] 是否顯示指示點 [默認true]
 * autoPlay [Boolean] 是否自動輪播 [默認true]
 * interval [Number] 切換間隔 [默認5000]
 * duration [Number] 切換運動時間 [默認500]
 * loop	[Boolean] 是否循環滾動 [默認true]
 * dotsColor [String] 指示點顏色 [默認rgba(0, 0, 0, .3)]
 * activeDotsColor [String] 激活的指示點顏色 [默認#000]
 * imgArr [Array] banner內容 [默認爲空數組]
 * hasTapEvent [Boolean] 點擊banner是否觸發跳轉事件 [默認true]
 * imgArr 格式：[]
   bind:sendInfoMethod banner改變函數， 會向page回傳當前頁index與總數
 */
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    /**
     * 屬性名：{
     *  type：類型（必填）String, Number, Boolean, Object, Array, null（表示任意類型）
     *  value：默認值
     * }
     */
    showDots: { // 是否顯示指示點
      type: Boolean,
      value: true,
    },
    autoPlay: { // 是否自動輪播
      type: Boolean,
      value: true,
    },
    interval: { // 切換間隔
      type: Number,
      value: 5000,
    },
    duration: { // 切換運動時間
      type: Number,
      value: 500,
    },
    loop: { // 是否循環滾動
      type: Boolean,
      value: true,
    },
    dotsColor: { // 指示點顏色
      type: String,
      value: 'rgba(0, 0, 0, .3)',
    },
    activeDotsColor: { // 激活的指示點顏色
      type: String,
      value: '#000',
    },
    imgArr: { // 圖片數組
      type: Array,
      value: [],
    },
    hasTapEvent: {
      type: Boolean,
      value: true,
    }
  },
  /**
   * 組件的初始數據
   */
  data: {},
  /**
   * 組件的方法列表
   */
  methods: {
    previewImg(e){
      // console.log(e)
      var arr = [];
      for (var i = 0; i < e.currentTarget.dataset.previewurl.length;i++){
        arr.push(e.currentTarget.dataset.previewurl[i].originUrl)
      }
      var currentUrl = e.currentTarget.dataset.currenturl;
      var previewUrls = e.currentTarget.dataset.previewurl;
      wx.previewImage({
        current: currentUrl, //必須是http圖片，本地圖片無效
        urls: previewUrls, //必須是http圖片，本地圖片無效
      })
    },
    // banner改變函數， 會向page回傳當前頁index與總數
    bannerChange(e) {
      let bannerChangeInfo = {
        current: e.detail.current, // 當前頁
        total: this.properties.imgArr.length, // 總
      }
      // console.log(bannerChangeInfo)
      this.triggerEvent('sendInfoMethod', bannerChangeInfo);
    }
  }
})

wxss:

/* components/common-banner/common-banner.wxss */
swiper{
  width: 100%;
  height: 100%;
  position: relative;
}
swiper-item image{
  width: 100%;
  height: 100%;
}
swiper .loading{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  font-size: 30rpx;
  color: #aaa;
}

 

3.正文引用

wxml：

  <!-- banner -->
  <view class='swiper-view'>
    <common-banner imgArr="{{imagesList}}" showDots="{{false}}" hasTapEvent="{{false}}" bind:sendInfoMethod="listenSwiper">
    </common-banner>
    <!-- banner索引 -->
    <view class='swiper-num'>
      <text class='big-nub'>{{swiperNum}}/</text>{{imagesList.length}}
    </view>
  </view>

js:

data:{
    imagesList: [], //輪播圖片
    swiperNum: 1, //輪播圖第幾張
},
// 接收banner滑動事件,右下角顯示
listenSwiper: function(e) {
    this.setData({
        'swiperNum': e.detail.current + 1
    })
},

wxss：

/*banner輪播  */
.swiper-view {
  width: 100%;
  height: 460rpx;
  position: relative;
  background-color: #eff2f4;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.swiper-content {
  width: 100%;
  height: 100%;
}
.swiper-list {
  width: 100%;
  height: 100%;
}
.swiper-img {
  width: 100%;
}
/* banner索引 */
.swiper-num {
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 20rpx;
}
.swiper-num .big-nub {
  font-size: 28rpx;
}