front-end/mobile-code/src/components/app-swiper.vue

<template>
	<div class="swiper-wrap" :style="{'width': widthFn,'height': heightFn}">
		<swiper :indicator-dots="!tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#F04545" @change="bannerChange">
			<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="detail">
				<img :src="item" class="tui-slide-image" mode="center" />
			</swiper-item>
		</swiper>
		<app-tag v-if="tagShow" type="translucent" shape="circleLeft" size="small">{{index + 1}}/{{list.length}}</app-tag>
	</div>
</template>

<script>
import AppTag from '@/components/module/app-tag.vue'
export default {
	name: 'app-swiper',
	components: {
		AppTag
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 是否显示右下角tag
		tagShow: {
			type: Boolean,
			default: false
		},
		// 是否自动播放
		autoplay: {
			type: Boolean,
			default: true
		},
		// 宽度
		width: {
			type: Object,
			default: () => {
				return {
					type: 'string',
					val: '100%'
				}
			}
		},
		// 高度
		height: {
			type: Object,
			default: () => {
				return {
					type: 'number',
					val: 480
				}
			}
		}
	},
	data() {
		return {
			index: 0
		}
	},
	computed: {
		widthFn() {
			if (this.width.type == 'number') {
				return uni.upx2px(this.width.val) + 'px'
			} else {
				return this.width.val
			}
		},
		heightFn() {
			if (this.height.type == 'number') {
				return uni.upx2px(this.height.val) + 'px'
			} else {
				return this.height.val
			}
		}
	},
	methods: {
		bannerChange: function(e) {
			this.index = e.detail.current
		},
		detail(data) {
			this.$emit('detail', data)
		}
	}
}
</script>

<style lang="scss" scoped>
.swiper-wrap {
	position: relative;
	height: 480px;
	.tui-banner-swiper {
		height: 100%;
	}
	.tui-slide-image {
		width: 100%;
		height: 100%;
	}
	/* #ifdef H5 */
	/deep/.tui-banner-swiper .uni-swiper-dot {
		width: 28rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	/deep/.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: #969696;
		border-radius: 16rpx;
		overflow: hidden;
	}

	/deep/.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #F04545;
	}

	/* #endif */
	// tag
	.tui-tag-class {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}
}

</style>