<template>
|
<view class="vk-u-swiper">
|
<view v-if="datas && datas.list && datas.list.length > 0">
|
<u-swiper
|
:list="getValue('list')"
|
:title="getValue('title')"
|
:mode="getValue('mode','round')"
|
:height="getValue('height',300)"
|
:indicator-pos="getValue('indicator-pos','bottomCenter')"
|
:autoplay="getValue('autoplay',true)"
|
:interval="getValue('interval',2500)"
|
:circular="getValue('circular',true)"
|
:duration="getValue('duration',500)"
|
:border-radius="getValue('border-radius',8)"
|
:title-style="getValue('title-style')"
|
:img-mode="getValue('img-mode','aspectFill')"
|
:name="getValue('name','image')"
|
:bg-color="getValue('bg-color','#f3f4f6')"
|
:current ="getValue('current',0)"
|
:effect3d="getValue('effect3d')"
|
:effect3d-previous-margin="getValue('effect3d-previous-margin',50)"
|
|
@click="onClick"
|
@change="onChange"
|
></u-swiper>
|
</view>
|
<view v-else
|
:style="'height: '+getValue('height',300)+'rpx;'"
|
style="display: block;"
|
>
|
<u-image width="100%" height="100%" mode="scaleToFill"></u-image>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "vk-u-swiper",
|
props: {
|
dataId:{
|
type: String,
|
default () {
|
return "";
|
}
|
},
|
datas: {
|
type: Object,
|
default () {
|
return {};
|
}
|
},
|
customDatas: {
|
type: Object,
|
default () {
|
return {};
|
}
|
}
|
},
|
data: function () {
|
// 组件创建时,进行数据初始化
|
return {
|
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
// 点击轮播图时触发 index：点击了第几张图片，从0开始
|
onClick(index){
|
this.$emit("click",index);
|
},
|
// 轮播图切换时触发(自动或者手动切换) index：切换到了第几张图片，从0开始
|
onChange(index){
|
this.$emit("change",index);
|
},
|
getValue(key, defaultValue){
|
let { customDatas, datas } = this;
|
if(!customDatas) customDatas = {};
|
if(!datas) datas = {};
|
let value = customDatas[key];
|
if(typeof value === "undefined"){
|
value = datas[key];
|
if(typeof value === "undefined"){
|
value = defaultValue;
|
}
|
}
|
return value;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
