template-project/components/function-list/swiper-gong-ge/swiper-gong-ge.vue

<template>
	<view class="posir">
		<swiper class="bacf width100" 
			:current="currentIndex" 
			:indicator-dots="ifAutoplay" 
			:autoplay="false" 
			:duration="500" 
			:style="{paddingBottom:itemTop,height: swiperHeight+'px'}"
			@change="changeEv">
			<swiper-item v-for="(items,indexs) in list" :key="indexs">
				<view class="disac fw">
					<block v-for="(item,index) in items" :key="index">
						<view @tap="chooseGe(item.url,index)" class="disjcac fc swiper-item-box" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
							<view class="disjcac" :style="{height: maxHeight+'rpx'}">
								<!-- 图片 -->
								<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
							</view>
							<!-- 标题 -->
							<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
						</view>
					</block>
				</view>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view class="posia disjcac width100" style="bottom: 20rpx;">
			<view class="mar-y10 gong-ge-spot" 
			:class="currentIndex==index ? 'active-spot' : ''" 
			v-for="(item,index) in list.length" :key="index"
			:style="{backgroundColor:currentIndex==index ? activeStop : moStop}"></view>
		</view>
	</view>
</template>
<script>
	import imgTools from '@/jsFile/img/yy-img.js';
	export default {
		name:'column-function',
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						[
							{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
							{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
							{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
						],
						[
							{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
							{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
							{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
							{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
						]
					]
				}
			},
			// 是否自动轮播
			ifAutoplay:{
				type:Boolean,
				default:false
			},
			// 一排显示数量
			rowNum:{
				type:String,
				default:'5'
			},
			// 标题颜色
			titlec:{
				type:String,
				default:'#000000'
			},
			// 字体大小
			fonts:{
				type:String,
				default:'28rpx'
			},
			// 字体距离图标的距离
			titleTop:{
				type:String,
				default:'20rpx'
			},
			// item的顶部距离
			itemTop:{
				type:String,
				default:'50rpx'
			},
			// 选中时指示点的颜色
			activeStop:{
				type:String,
				default:'rgba(0,0,0,1)'
			},
			// 未选中时指示点的颜色
			moStop: {
				type:String,
				default:'rgba(0,0,0,.2)'
			}
		},
		data(){
			return {
				currentIndex:0,
				swiperHeight:0,
			}
		},
		mounted() {
			this.changeHeight();
		},
		computed:{
			// 找图标高度最大值
			maxHeight() {
				let arr = [];
				this.list.forEach(item=>{arr.push(item.iconHeight);})
				let max = arr.reduce((a,b)=>{return b > a ? b : a})
				return max;
			}
		},
		methods:{
			// 改变swiper的高度
			changeHeight() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.swiper-item-box').boundingClientRect((rect) => {
					// 查询单个格子的高度，并设置swiper的高
					if(this.list[this.currentIndex].length <= this.rowNum) {
						// 如果每轮的数组长度，小于等于一排显示的个数，那么设置一个格子的高度
						this.swiperHeight = rect.height*1 + 10;
					} else {
						// 如果每轮的数组长度，大于一排显示的个数，那么设置两个个格子的高度
						this.swiperHeight = rect.height*2 + 10;
					}
					
				}).exec()
			},
			// 列表选择事件
			chooseGe(url,index) {
				// console.log(imgTools.uploadImg(),137);
				// imgTools.chooseCompressImg();
				imgTools.chooseCompressImg().then(res=>{
					console.log(imgTools.getImgInfo(res));
				})
				// 抛出事件
				// this.$emit('chooseGe',{url,index})
				// if(url) {
				// 	uni.navigateTo({url})
				// }
			},
			changeEv(e) {
				this.currentIndex = e.detail.current;
				this.changeHeight();
			}
		}
	}
</script>

<style>
	.gong-ge-spot{
		width: 20rpx;height: 20rpx;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, .2);
	}
	.active-spot{
		background-color: rgba(0, 0, 0, .5);
		animation: gongspot 3s linear alternate infinite;
	}
	@keyframes gongspot{
		0%{background-color: rgba(0, 0, 0, 1);}
		25%{background-color: rgba(255, 0, 0, 1);}
		50%{background-color: rgba(0, 255, 0, 1);}
		75%{background-color: rgba(0, 0, 255, 1);}
		100%{background-color: rgba(0, 0, 0, 1);}
	}
</style>