hwnc/components/ui-component/U_slideshow/m/index.vue

<template>
	<view class="U000002-template1" :style="wrapper_style">
		<image v-if="list.length == 0" @load="init" mode="widthFix" :src="defaultUrl" :style="img_style"
			:id="'content-wrap0'">
		</image>
		<swiper v-if="list.length > 0" :indicator-dots="true" :autoplay="false" :interval="3000" @change="changeSwiper"
			:current="currentIndex" :style="{height:swiperHeight+'px'}">
			<swiper-item v-for="(item, index) in list" :key="item.id" :style="img_style">
				<view v-if="item.is_minApp==1" @click="$until.u_gopage('U_slideshow',item)">
					<image mode="widthFix" @load="init" :src="item.image" :style="img_style" :id="'content-wrap'+index">
					</image>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view v-else @click="$until.u_gopage('U_slideshow',item)">
					<image mode="widthFix" @load="init" :src="item.image" :style="img_style" :id="'content-wrap'+index">
					</image>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-else>
					<wx-open-launch-weapp :username="item.gh_id" :path="item.minApp_link">
						<image mode="widthFix" @load="init" :src="item.image" :style="img_style"
							:id="'content-wrap'+index"></image>
					</wx-open-launch-weapp>
				</view>
				<!-- #endif -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: ['datas', 'styles'],
		data() {
			const self = this;
			let siteinfo = getApp().globalData.siteinfo;
			let data = {
				settingFile: siteinfo,
				defaultUrl: siteinfo.root_img + '/static/app/banner.png',
				//滑块的高度(单位px)
				swiperHeight: '180',
				//当前索引
				currentIndex: 0,
				//列表数据
				dataList: [],

			};
			return data;
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
					bg_color
				} = this.datas;
				if (this.list.length == 1) {
					return `
					    background-color: ${bg_color};
					   padding-top: ${padding_top*2}rpx;
					   padding-bottom: ${padding_bottom*2}rpx;
					   padding-left: ${padding_left*2}rpx;
					   padding-right: ${padding_right*2}rpx;
					`;
				} else {
					return `
                background-color: ${bg_color};
                padding-top: ${padding_top*2}rpx;
                padding-bottom: ${padding_bottom*2}rpx;
                padding-left: ${padding_left*2}rpx;
                padding-right: ${padding_right*2}rpx;
            `;
				}
			},

			img_style() {
				const {
					picture_border,
				} = this.datas;
				return `
				width: 100%;
                border-radius: ${picture_border}px;
            `;
			},

			// 广告轮播列表
			list() {
				try {
					let list = [...this.datas.list] || [];
					list = list.filter(item => item.image != '');
					return list;
				} catch (err) {
					return [];
				}
			}
		},
		methods: {
			//手动切换题目
			changeSwiper(e) {
				this.currentIndex = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			init() {
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let that = this;
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(that);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						if (that.swiperHeight != res[0].height) {
							that.swiperHeight = res[0].height;
						}
					}
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.U000002-template1 {
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		overflow: hidden;

		img {
			width: 100%;
		}
	}
</style>