首頁組件

components/blackmonth-swiper/index.vue

@@ -0,0 +1,153 @@
+<template>
+	<view>
+		<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
+			<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
+				:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
+				<view class="children">
+					<image class="pic" :src="item.logo"></image>
+				</view>
+			</view>
+		</view>
+		<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
+			:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
+			<swiper-item class="children">
+				<image class="pic" :src="item.logo"></image>
+			</swiper-item>
+		</swiper> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			swiperList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			timersetnteritem: {
+				type: String,
+				default: '0'
+			}
+		},
+		data() {
+			return {
+				timersetInterval: null,
+				slideNote: {
+					x: 0,
+					y: 0
+				},
+				screenWidth: 0,
+				itemStyle: []
+			};
+		},
+		watch: {
+			timersetnteritem(newVal,oldVal) {
+				if (newVal == 1) {
+					clearTimeout(this.timersetInterval);
+					this.timersetInterval = null;
+				}
+			}
+		},
+		created() {
+			var macInfo = uni.getSystemInfoSync();
+			this.screenWidth = macInfo.screenWidth;
+			// 计算swiper样式
+			this.swiperList.forEach((item, index) => {
+				this.itemStyle.push(this.getStyle(index))
+			})
+			this.timersetInterval = setInterval(() => {
+				this.endMove()
+			}, 2000);
+		},
+		methods: {
+			getStyle(e) {
+				if (e > this.swiperList.length / 2) {
+					var right = this.swiperList.length - e
+					return {
+						transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
+						zIndex: 9999 - right,
+						opacity: 1
+					}
+				} else {
+					return {
+						transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
+						zIndex: 9999 - e,
+						opacity: 1
+					}
+				}
+				// if (e > this.swiperList.length / 2) {
+				// 	var right = this.swiperList.length - e
+				// 	return {
+				// 		transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
+				// 		zIndex: 9999 - right,
+				// 		opacity: 0.8 / right
+				// 	}
+				// } else {
+				// 	return {
+				// 		transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
+				// 		zIndex: 9999 - e,
+				// 		opacity: 0.8 / e
+				// 	}
+				// }
+			},
+			startMove(e) {
+				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
+				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
+			},
+			endMove(e) {
+				console.log(e, 86)
+				var newList = JSON.parse(JSON.stringify(this.itemStyle))
+				// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
+				// 向左滑动
+				var last = [newList.pop()]
+				newList = last.concat(newList)
+				// } else {
+				// 向右滑动
+				// newList.push(newList[0])
+				// newList.splice(0, 1)
+				// }
+				this.itemStyle = newList
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.swiperPanel {
+		margin: 20rpx 0;
+		height: 100rpx;
+		width: 100%;
+		overflow: hidden;
+		position: relative;
+
+		.swiperItem {
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			transition: all .5s;
+
+			/* 定义一个动画关键帧 */
+
+
+			.children {
+				height: 100%;
+				width: 25%;
+				// margin: 2rpx auto;
+
+
+				/* 应用动画，设置动画时长、循环次数和速度曲线 */
+				.pic {
+					height: 100%;
+					width: 100%;
+					border-radius: 50%;
+					// box-shadow: 0 0 10px #333;
+				}
+			}
+
+		}
+	}
+</style>