pda_uniapp/pages/index.vue

<template>
	<view class="home-container">
		<!-- <image class="logo" src="@/static/images/superMan.png"></image>
		<view class="text-area">
			<text class="title">这里是主页，放几个统计图</text>
		</view> -->
		<!-- 轮播图 -->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<!-- <uni-section title="系统功能" type="line"></uni-section> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
				// {
				// 	id: 0,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner01.jpg'
				// }, {
				// 	id: 1,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner02.jpg',
				// }, {
				// 	id: 2,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner03.jpg'
				// }, 
				{
					id: 3,
					type: 'image',
					url: '/static/images/banner/banner04.jpg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/images/banner/banner05.jpg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/images/banner/banner06.jpg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/images/banner/banner07.jpg'
				}],
				towerStart: 0,
				direction: '',
				dotStyle: true
			}
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			this.direction = 'left';
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods: {
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
				console.log(e)
			},
			navChange(e) {
				console.log("navChange", e)
				//todo 校验是否有权限
				var path = e.path;
				console.log(path)
				//this.PageCur = e.currentTarget.dataset.cur
				this.$tab.navigateTo(path)
			},
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				console.log(list)
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			// towerSwiper触摸开始
			TowerStart(e) {
				console.log(e)
				this.towerStart = e.touches[0].pageX
			},
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					console.log(list[0])
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style>
	.home-container {
		background: linear-gradient(180.00deg, rgb(181, 202, 245) 0%, rgb(184, 204, 245) 40.449%, rgba(213, 227, 249, 0) 87.96%);
		width: 100%;
		height: 90vh;
		overflow: hidden;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>