173 lines
5.1 KiB
Vue
173 lines
5.1 KiB
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> |