front-end/ghsApp/src/components/app-swiper.vue

<template>
<view class="bigBox">
  	<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="#3387ff" @change="bannerChange">
			<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="detail">
				<img :src="item.img" class="tui-slide-image" mode="scaleToFill" />
        		<view class="info">{{item.name || ''}}</view>
			</swiper-item>
		</swiper>
		<!-- <app-tag v-if="tagShow" class="swiper-tag" type="translucent" shape="circleLeft" size="small">{{index + 1}}/{{list.length}}</app-tag> -->
	</div>
  <view class="swiper_dots">
      <text v-for="(item, index) in list" :key="index" :class="{'active': index === currentIndex}"></text>
    </view>
  </view>
</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 {
			currentIndex: 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.currentIndex = e.detail.current
		},
		detail(data) {
			this.$emit('detail', data)
		}
	}
}
</script>

<style lang="scss" scoped>
.swiper-wrap {
	position: relative;
	height: 480upx;
  margin: 0 auto ;
  border-radius: 20upx;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
	.tui-banner-swiper {
		height: 100%;
	}
	.tui-slide-image {
		width: 100%;
		height: 100%;
	}
  .info{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 88upx;
    line-height: 88upx;
    text-align: center;
    font-size: 32upx;
    color: #fff;
    background: rgba(0,0,0,0.6)
  }
	/* #ifdef H5 */
	::v-deep.tui-banner-swiper .uni-swiper-dot {
		width: 28upx;
		height: 8upx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

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

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

	/* #endif */
  
}
.bigBox{
  height: 450upx;
  position: relative;
  .swiper_dots{
    position: absolute;
    bottom: 10upx;
    left: 50%;
    z-index: 2021;
    transform: translateX(-50%);
    // height: 16upx;
    // width: 100upx;
    // background-color: red !important;
    &>text{
      display: inline-block;
      height: 12upx;
      width: 12upx;
      background: #CCCCCC;
      border-radius: 6upx;
      margin-left: 14upx;
    }
    &>.active{
      width: 26upx;
      background: #3387FF;
    }
  }
}
</style>