159 lines
5.0 KiB
Vue
159 lines
5.0 KiB
Vue
<template>
|
||
<view :class="theme_view">
|
||
<view v-if="propData.length > 0" class="spacing-mb" :class="(propLeft ? 'swiper-left ' : '') + (propRight ? 'swiper-right ' : '')">
|
||
<uni-swiper-dot class="uni-swiper-dot-box" :mode="propMode" :dots-styles="dotsStyles" @clickItem="click_item" :info="propData" :current="current">
|
||
<swiper class="banner oh" :class="' banner-' + (propSize || 'default') + ' ' + propRadius" :autoplay="propData.length > 0" :duration="duration" :circular="circular" @change="swiper_change" :current="swiperDotIndex">
|
||
<swiper-item v-for="(item, i) in propData" :key="i">
|
||
<image class="image" :src="item.images_url" mode="widthFix" :data-value="item.event_value || item.url" :data-type="item.event_type == undefined ? 1 : item.event_type" @tap="banner_event"> </image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const app = getApp();
|
||
export default {
|
||
data() {
|
||
return {
|
||
theme_view: app.globalData.get_theme_value_view(),
|
||
circular: true,
|
||
duration: 500,
|
||
styleIndex: -1,
|
||
current: 0,
|
||
swiperDotIndex: 0,
|
||
dotsStyles: {},
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {
|
||
propData: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
propSize: {
|
||
type: String,
|
||
default: 'default',
|
||
},
|
||
propRadius: {
|
||
type: String,
|
||
default: 'border-radius-main',
|
||
},
|
||
// 指示点 class 调整靠左
|
||
propLeft: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 指示点 class 调整靠右
|
||
propRight: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 轮播指示点分类 default/dot/round/nav/indexes
|
||
propMode: {
|
||
type: String,
|
||
default: 'dot',
|
||
},
|
||
// 未选择指示点背景色
|
||
propBackgroundColor: {
|
||
type: String,
|
||
default: '#fff',
|
||
},
|
||
// 指示点宽度 在 mode = nav、mode = indexes 时不生效
|
||
propWidth: {
|
||
type: Number,
|
||
default: 6,
|
||
},
|
||
// 指示点距 swiper 底部的高度
|
||
propBottom: {
|
||
type: Number,
|
||
default: 10,
|
||
},
|
||
// 未选择指示点边框样式
|
||
propBorder: {
|
||
type: String,
|
||
default: '0',
|
||
},
|
||
// 指示点前景色，只在 mode = nav ，mode = indexes 时生效
|
||
propColor: {
|
||
type: String,
|
||
default: '#fff',
|
||
},
|
||
// 已选择指示点背景色，在 mode = nav 时不生效
|
||
propSelectedBackgroundColor: {
|
||
type: String,
|
||
default: '' + app.globalData.hex_rgba(app.globalData.get_theme_color(), 0.5),
|
||
},
|
||
// 已选择指示点边框样式，在 mode = nav 时不生效
|
||
propSelectedBorder: {
|
||
type: String,
|
||
default: '0',
|
||
},
|
||
},
|
||
beforeMount() {
|
||
this.dotsStyles = {
|
||
backgroundColor: this.propBackgroundColor,
|
||
width: this.propWidth,
|
||
bottom: this.propBottom,
|
||
border: this.propBorder,
|
||
color: this.propColor,
|
||
selectedBackgroundColor: this.propSelectedBackgroundColor,
|
||
selectedBorder: this.propSelectedBorder,
|
||
};
|
||
},
|
||
methods: {
|
||
swiper_change(e) {
|
||
// 原始index
|
||
this.current = e.detail.current;
|
||
// 当前滑index
|
||
// this.currentIndex = tmpCurrent == this.propData.length - 1 ? 0 : tmpCurrent + 1;
|
||
this.$emit('changeBanner', this.propData[this.current].bg_color);
|
||
},
|
||
click_item(e) {
|
||
this.swiperDotIndex = e;
|
||
},
|
||
banner_event(e) {
|
||
app.globalData.operation_event(e);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.banner {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.banner .image {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.banner-mini,
|
||
.banner-mini .image {
|
||
height: 200rpx !important;
|
||
}
|
||
|
||
.banner-default,
|
||
.banner-default .image {
|
||
height: 280rpx !important;
|
||
}
|
||
|
||
.banner-max,
|
||
.banner-max .image {
|
||
height: 420rpx !important;
|
||
}
|
||
|
||
/**
|
||
* 指示点 左右定位
|
||
*/
|
||
.swiper-left /deep/ .uni-swiper__dots-box {
|
||
justify-content: start;
|
||
padding-left: 24rpx;
|
||
}
|
||
|
||
.swiper-right /deep/ .uni-swiper__dots-box {
|
||
justify-content: end;
|
||
padding-right: 24rpx;
|
||
}
|
||
</style>
|