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