wardrobe/tm-vuetify/components/tm-swiper/tm-swiper.vue

<template>
	<view class="tm-swiper " :class="[inline ? 'd-inline-block' : '']">
		<swiper :disable-touch="notouch" :previous-margin="`${ani3d}rpx`" :next-margin="`${ani3d}rpx`" :style="{
				width: w_s + 'rpx',
				height: h_s + 'rpx'
			}" :vertical="vertical"  :autoplay="autoplay&&!isPlayVedio" :circular="circular" :interval="interval" :duration="duration"
			:indicator-active-color="color_tmeme" :current="nowIndex" @change="change">
			<block v-for="(item, index) in dataList" :key="index">
				<swiper-item :style="{
						width: w_s + 'rpx',
						height: h_s + 'rpx'
					}" class="shadow-24" :class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
					<view
						:class="[nowIndex !== index&&ani3d>0?'a3d':'',round_num > 0 ? ` round-${round_num} overflow` : '',nowIndex<index&&ani3d>0?'a3dL':'',nowIndex>index&&ani3d>0?'a3dR':'']"
						class="tm-swiper-ik fulled fulled-height" :key="index">
						<view class="actvieMarginDh">
							<view class="actvieMarginDh-item"
								:class="[round_num > 0 ? ` round-${round_num} overflow` : '']">
								<image v-if="item.dtype!='video'" @click="itemClick(item)" :style="{
										height: h_s + 'rpx',
										width: (w_s - margin_px) + 'rpx'
									}" @load="imgload($event, index)" :src="item.url"
									:class="[round_num > 0 ? ` round-${round_num} overflow` : '']"></image>
								<video @play="isPlayVedio = true" @pause="isPlayVedio=false" @ended="isPlayVedio=false" :autoplay="nowIndex == index?true:false" :style="{
										height: h_s + 'rpx',
										width: (w_s - margin_px) + 'rpx'
									}" v-if="item.dtype=='video'" :src="item.url"></video>

								<view v-if="item.title" :style="{
										width: (w_s - margin_px) + 'rpx'
									}" class="flex-start relative ">
									<view
										class="text-size-s px-16 absolute b-0 l-0 zIndex-14 flex-start text-overflow text-white"
										:style="{
										height: '66rpx',
										width: (w_s - margin_px-32) + 'rpx',
										lineHeight:'66rpx',
										background:'rgba(0,0,0,0.4)'
									}">
										{{item.title}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="tm-swiper-dot" v-if="indicatorDots&&nowshowDot" :class="[dotDirection]">
		
			<block v-if="dotModel != 'round'">
				<view @click="nowIndex = index" v-for="(item, index) in dataList" :key="index"
					class="tm-swiper-dot-item  flex-center  mx-8"
					:class="[nowIndex == index ? color_tmeme : 'unactive', dotModel]">
					<text v-if="dotModel === 'number'" class="text-size-xs">{{ index + 1 }}</text>
				</view>
			</block>
			<block v-if="dotModel == 'round'">
				<view :class="[dotModel]"
					class="text-size-xs balck text-white  round-24 px-24 tm-swiper-dot-item  flex-center flex-shrink"
					:style="{ height: '40rpx', minWidth: '60rpx' }">
					{{ nowIndex + 1 + '/' + dataList.length }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	/**
	 * 图片轮播
	 * @description 很参数与原官方相同。
	 * @property {Number} width = [] 默认：0，轮播宽度，0为自己计算。
	 * @property {Number} height = [] 默认：0，轮播高度，0为自己计算。
	 * @property {Array} list = [] 默认：[]，图片列表，可以是string数组或者object数组。
	 * @property {String} rang-key = [] 默认：[]，图片列表object数组时，需要提供图片地址 的键值。
	 * @property {Boolean} inline = [] 默认：false，是否内联，方便一排放多个轮播组件。
	 * @property {Boolean} previmage = [] 默认：true,是否预览图片，点击图片时，放大预览。
	 * @property {Boolean} vertical = [] 默认：false,是否竖向滚动。
	 * @property {Boolean} circular = [] 默认：false,是否采用衔接滑动，即播放到末尾后重新回到开头
	 * @property {Boolean} autoplay = [] 默认：false,是否自动切换
	 * @property {Number} interval = [] 默认：3000,自动切换时间间隔
	 * @property {Number} duration = [] 默认：500,滑动动画时长
	 * @property {Number} ani3d = [] 默认：0,开启3d缩放动画
	 * @property {Boolean} indicator-dots = [] 默认：true,是否显示指示
	 * @property {String} color = [] 默认：primary,指示点的主题色。
	 * @property {Number} current = [] 默认：0,如果需要双向绑定请使用current.sync.
	 * @property {String} dot-model = [dot|number|rect|round] 默认：dot,指示点的类型。
	 * @property {String} dot-direction = [left|center|right] 默认：center,指示点的位置。
	 * @property {Number} round = [] 默认：0,圆角,单位rpx
	 * @property {Number} margin = [] 默认：0,单位rpx
	 * @property {Function} change 轮播切换时触发。参数返回当前播放位置。
	 * @property {Function} click 轮播项目被点击时触发发,返回项目数据
	 * @example <tm-swiper :list="['https://picsum.photos/300?jv=3','https://picsum.photos/300?jv=3']" ></tm-swiper>
	 */
	export default {
		name: 'tm-swiper',
		props: {
			width: {
				type: Number | String,
				default: 0
			},
			// 自定高度。
			height: {
				type: Number | String,
				default: 0
			},
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			rangKey: {
				type: String,
				default: 'src'
			},
			// 是否内联。
			inline: {
				type: Boolean,
				default: false
			},
			// 是否开启预览模式，即点击图片可以预览。
			previmage: {
				type: Boolean | String,
				default: true
			},
			vertical: false,
			notouch: false,
			circular: false,
			autoplay: false,
			interval: {
				type: Number,
				default: 3000
			},
			duration: {
				type: Number,
				default: 500
			},
			// 是否显示指示
			indicatorDots: false,
			//指示点的主题色。
			color: {
				type: String,
				default: 'primary'
			},
			// 当前位置。
			current: {
				type: Number,
				default: 0
			},
			ani3d: {
				type: Number,
				default: 0
			},
			// 指示点的类型。
			dotModel: {
				type: String,
				default: 'dot' //dot|number|rect
			},
			// 指示点的位置 。
			dotDirection: {
				type: String,
				default: 'center' //left|center|right
			},
			round: {
				type: Boolean | Number,
				default: 0
			},
			margin: {
				type: Number,
				default: 0
			},
			// 跟随主题色的改变而改变。
			fllowTheme: {
				type: Boolean | String,
				default: true
			}
		},
		watch: {
			current: function(newval) {
				if (newval >= this.dataList.length) {
					this.nowIndex = 0;
					return;
				}
				this.nowIndex = newval;
			},
			list: {
				deep: true,
				handler() {
					this.chulidata();
				}
			}
		},
		computed: {
			color_tmeme: function() {
				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
					.fllowTheme) {
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			round_num: function() {
				if (typeof this.round === 'boolean') return 0;
				return this.round;
			},
			nowIndex: {
				get: function() {
					return this.dotIndex;
				},
				set: function(val) {
					this.dotIndex = val;
					this.$emit('update:current', val);
					this.$emit('change', val);
				}
			},
			nowshowDot:function(){
				return this.showdot();
				
			},
			w_s: {
				get: function() {
					return this.w_w;
				},
				set: function(val) {
					this.w_w = val;
				}
			},
			h_s: {
				get: function() {
					return this.h_h;
				},
				set: function(val) {
					this.h_h = val;
				}
			},
			margin_px: function() {
				return this.margin * 2;
			},

		},

		data() {
			return {
				w_w: 0,
				h_h: 0,
				dataList: [],
				dotIndex: 0,
				isPlayVedio:false,
			};
		},
		async mounted() {
			this.nowIndex = this.current;

			let w = this.width;
			if (String(w).indexOf('px') > -1 && typeof w == 'string') {
				let p = parseInt(h);
				let sy = 750 / uni.getSystemInfoSync().windowWidth;
				w = p * sy;
			}
			if (typeof w == 'string') {
				w = parseInt(w);
			}
			this.w_w = w;

			let h = this.height;
			if (String(h).indexOf('px') > -1 && typeof h == 'string') {
				let p = parseInt(h);
				let sy = 750 / uni.getSystemInfoSync().windowWidth;
				h = p * sy;
			}
			if (typeof h == 'string') {
				h = parseInt(h);
			}

			this.h_h = h;

			this.$nextTick(async function() {
				await this.chulidata();
			});
		},
		methods: {
			
			showdot(){
				if(typeof this.dataList[this.nowIndex]=='string') return true;
				if(typeof this.dataList[this.nowIndex]=='object'){
					if(this.dataList[this.nowIndex].dtype=='video') return false;
				}
				return true;
			},
			async chulidata() {
				let t = this;
				let tb = await this.$Querey('.tm-swiper', this).catch(ev => {});
				//console.log(uni.getSystemInfoSync());
				let sy = 750 / uni.getSystemInfoSync().windowWidth;
				let upxw = tb[0].width * sy;
				let sw = this.w_s > 0 ? this.w_s : upxw > 0 ? upxw : 100;
				this.w_s = sw;
				let sh = this.h_s > 0 ? this.h_s : tb[0].height > 0 ? tb[0].height : 300;
				this.h_s = sh;
				let d = [];
				this.list.forEach(item => {
					if (typeof item === 'string') {
						d.push({
							width: sw,
							height: sh,
							url: item,
							title: '',
							dtype: '',
							data: item
						});
					} else if (typeof item === 'object') {
						d.push({
							width: sw,
							height: sh,
							url: item[t.rangKey],
							title: item['title'] || '',
							dtype: item['type'] || '',
							data: item
						});
					}
				});
				this.dataList = d;
			},
			imgload(e, index) {},
			change(event) {
				this.nowIndex = event.detail.current;
			},
			itemClick(e) {
				if (this.previmage) {
					uni.previewImage({
						current: e.url,
						urls: [e.url]
					});
				}
				this.$emit('click', e);
			}
		}
	};
</script>
<style></style>
<style lang="scss" scoped>
	.tm-swiper {
		position: relative;

		.tm-swiper-ik {
			transition: all 1s;
		}

		.a3d {
			transform: scale(0.76);
		}

		.a3dL {
			transform: scale(0.76) translateX(-24rpx)
		}

		.a3dR {
			transform: scale(0.76) translateX(24rpx)
		}

		.actvieMarginDh {
			display: flex;
			justify-content: center;

			.actvieMarginDh-item {
				overflow: hidden;
				line-height: 0;
			}
		}

		.tm-swiper-dot {
			.tm-swiper-dot-item {
				width: 16upx;
				height: 16upx;
				border-radius: 50%;

				&.unactive {
					background-color: rgba(255, 255, 255, 0.6);
				}

				&.number {
					width: 34upx;
					height: 34upx;
				}

				&.rect {
					width: 24upx;
					height: 6upx;
					border-radius: 0;
				}

				&.round {
					background-color: rgba(0, 0, 0, 0.4);
				}
			}

			width: 100%;
			position: absolute;
			left: 0;
			display: flex;
			bottom: 20upx;

			&.center {
				display: flex;
				justify-content: center;
			}

			&.left {
				display: flex;
				justify-content: flex-start;
				padding-left: 20upx;
				width: calc(100% - 20upx);
			}

			&.right {
				display: flex;
				justify-content: flex-end;
				padding-right: 20upx;
				width: calc(100% - 20upx);
			}
		}
	}
</style>