120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
|
<view v-if="advList.length" :class="['container-box',className]">
|
|
<swiper :indicator-dots="advList.length > 1" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000" v-if="advList.length > 1" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" class="item-wrap">
|
|
<swiper-item v-for="(item, index) in advList" :key="index" @click="jumppage(item.adv_url)">
|
|
<view class="image-box">
|
|
<image :src="$util.img(item.adv_image)" mode="widthFix" :id="'content-wrap' + index" show-menu-by-longpress/>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-else class="container-box item-wrap">
|
|
<image :src="$util.img(advList[0]['adv_image'])" mode="widthFix" lazy-load="true" @load="imageLoad" @click="jumppage(advList[0].adv_url)" show-menu-by-longpress/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ns-advert',
|
|
props: {
|
|
keyword: {
|
|
type: String
|
|
},
|
|
className: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
advList: [],
|
|
isImage: false,
|
|
//滑块的高度(单位px)
|
|
swiperHeight: 150,
|
|
//当前索引
|
|
currentIndex: 0,
|
|
};
|
|
},
|
|
created() {
|
|
this.getAdvList();
|
|
},
|
|
methods: {
|
|
//获取广告位
|
|
getAdvList() {
|
|
var item = {
|
|
adv_image: '',
|
|
adv_url: ''
|
|
};
|
|
this.$api.sendRequest({
|
|
url: '/api/adv/detail',
|
|
data: {
|
|
keyword: this.keyword
|
|
},
|
|
success: res => {
|
|
if (res.code == 0) {
|
|
var data = res.data.adv_list;
|
|
for (var index in data) {
|
|
if (data[index].adv_url) data[index].adv_url = JSON.parse(data[index].adv_url);
|
|
}
|
|
this.advList = res.data.adv_list;
|
|
|
|
//动态设置swiper的高度
|
|
this.$nextTick(() => {
|
|
this.setSwiperHeight();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
jumppage(e) {
|
|
this.$util.diyRedirectTo(e);
|
|
},
|
|
imageLoad(data) {
|
|
this.isImage = true;
|
|
},
|
|
//手动切换题目
|
|
changeSwiper(e) {
|
|
this.currentIndex = e.detail.current;
|
|
//动态设置swiper的高度，使用nextTick延时设置
|
|
this.$nextTick(() => {
|
|
this.setSwiperHeight();
|
|
});
|
|
},
|
|
//动态设置swiper的高度
|
|
setSwiperHeight() {
|
|
if (this.advList.length > 1) {
|
|
setTimeout(() => {
|
|
let element = "#content-wrap" + this.currentIndex;
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select(element).boundingClientRect();
|
|
query.exec((res) => {
|
|
if (res && res[0]) {
|
|
this.swiperHeight = res[0].height;
|
|
}
|
|
});
|
|
}, 10);
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container-box {
|
|
width: 100%;
|
|
|
|
.item-wrap {
|
|
border-radius: 10rpx;
|
|
|
|
.image-box {
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 10rpx;
|
|
will-change: transform;
|
|
}
|
|
}
|
|
}
|
|
</style> |