61 lines
2.2 KiB
Vue
61 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<view class='swiper'>
|
|||
|
|
<swiper :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration" @change="swiperChange">
|
|||
|
|
<block v-for="(item,index) in imgUrls" :key="index">
|
|||
|
|
<swiper-item>
|
|||
|
|
<navigator :url="item.link" style='width:100%;height:100%;' hover-class='none'><image :src="item.img" class="slide-image"/></navigator>
|
|||
|
|
</swiper-item>
|
|||
|
|
</block>
|
|||
|
|
</swiper>
|
|||
|
|
<view class="dots acea-row">
|
|||
|
|
<view class="dot" :class="index == currentSwiper ? 'active' : ''" v-for="(item,index) in imgUrls" :key="index"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
imgUrls: {
|
|||
|
|
type: Array,
|
|||
|
|
default: function(){
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
circular: true,
|
|||
|
|
autoplay: true,
|
|||
|
|
interval: 3000,
|
|||
|
|
duration: 500,
|
|||
|
|
currentSwiper: 0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
swiperChange: function (e) {
|
|||
|
|
this.currentSwiper = e.detail.current
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.swiper{width:100%;height:282rpx;position:relative;}
|
|||
|
|
.swiper swiper{width:100%;height:100%;position:relative;}
|
|||
|
|
.swiper swiper .slide-image{width:100%;height:100%;}
|
|||
|
|
.swiper .dots{position:absolute;right:40rpx;bottom:20rpx;}
|
|||
|
|
.swiper .dots .dot{width:12rpx;height:12rpx;border:2rpx solid #fff;border-radius:50%;margin-right:15rpx;}
|
|||
|
|
.swiper .dots .dot.active{border-color:#e93323;background-color:#e93323;}
|
|||
|
|
</style>
|