shop4.3.57/components/page-component/app-swiper/swiper.vue

<template>
	<view class="banner" :style="{height: height + 'rpx'}">
		<view v-for="(item, index) in list" :key="index" class="pic"
			  :animation="num === index ?showpic:hidepic"
              :style="{zIndex: zIndex === index ?1:0}"
			  @touchstart="touchstart" @touchend="touchend">
			<app-jump-button
					:open_type="item.open_type"
					:url="item.url ? item.url : item.page_url"
					:params="item.params">
				<image :style="{height: height + 'rpx', width: '100%'}" :mode="imgMode"  :src="item[name]" />
			</app-jump-button>
		</view>
		<view class="u-swiper-indicator"
			  :style="{
				bottom: '12rpx',
				justifyContent: 'center'
			}"
		>
			<block v-if="mode === 'rect'">
				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index === num }" v-for="(item, index) in list"
					  :key="index"></view>
			</block>
			<block v-if="mode === 'round'">
				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index === num }" v-for="(item, index) in list"
					  :key="index"></view>
			</block>
		</view>
	</view>
</template>

<script>
	
    export default {
        name:'u-swiper',
        props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 图片的裁剪模式
			imgMode: {
				type: String,
				default: 'aspectFill'
			},
			// 从list数组中读取的图片的属性名
			name: {
				type: String,
				default: 'image'
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 250
			},
			// 自动轮播时间间隔，单位ms
			duration: {
				type: [Number, String],
				default: 500
			},
			// 隔多久自动切换
			interval: {
				type: [String, Number],
				default: 3000
			},
			// 指示器的模式，rect|dot|number|round
			mode: {
				type: String,
				default: 'round'
			},
			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
			indicatorPos: {
				type: String,
				default: 'bottomCenter'
			},
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
        },
        data() {
            return {
				num: 0,
                zIndex: 0,
				showpic:null,
				hidepic:null,
				setTime: 0,
				touchDot: 0
			}
        },
     
        methods: {
			touchstart(e) {
				this.touchDot = e.touches[0].pageX;
			},

			touchend(e) {
				let touchMove = e.changedTouches[0].pageX;
				if (touchMove - this.touchDot <= -40) {
					this.num = this.num - 1;
					if(this.num < 0){
						this.num=this.list.length-1;
					}
                    setTimeout(() => {
                        this.zIndex = this.num;
                    }, 1000);
				}
				if (touchMove - this.touchDot >= 40) {
					this.num = this.num + 1;
					if(this.num>=this.list.length){
						this.num=0;
					}
                    setTimeout(() => {
                        this.zIndex = this.num;

                    }, 1000);
				}
			}
        },
		destroyed() {
        	clearInterval(this.setTime);
		},
        watch: {
            list: {
                handler(newVal) {
                    if (newVal.length === 0) return;
                    let animation= uni.createAnimation({}) //创建一个动画实例
                    //淡入
                    animation.opacity(1).step({
                        duration:this.duration
                    }) //描述动画
                    this.showpic = animation.export();
                    //淡出
                    animation.opacity(0).step({duration:this.duration})
                    this.hidepic = animation.export();
                    if (this.autoplay) {
                        this.setTime = setInterval(() => {
                            this.num = this.num+1;
                            if(this.num>=this.list.length){
                                this.num=0;
                            }
                           setTimeout(() => {
                               this.zIndex = this.num;
                           }, this.interval + 1000)
                        }, this.interval);
                    }
                },
                immediate: true
            }
        }
	}
</script>

<style lang="scss">
	.banner {
		width: 750rpx;
		position: relative;
	}
	.pic {
		width:750rpx;
		position:absolute;
		top:0;
		left:0;
	}
	.u-swiper-indicator {
		padding: 0 24rpx;
		position: absolute;
		display: flex;
		width: 100%;
		z-index: 1;
	}
	.u-indicator-item-round-active {
		width: 34rpx !important;
		background-color: rgba(255, 255, 255, 0.8) !important;
	}
	.u-indicator-item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect {
		width: 26rpx;
		height: 8rpx;
		margin: 0 6rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect-active {
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>