86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<view class="disac fw bacf" :style="{paddingBottom:itemTop}">
|
||
|
|
<block v-for="(item,index) in list" :key="index">
|
||
|
|
<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :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>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
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-scan.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-person.png',iconWidth:60,iconHeight:60,title:'标题五'},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 一排显示数量
|
||
|
|
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:'30rpx'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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:{
|
||
|
|
// 列表选择事件
|
||
|
|
chooseGe(url,index) {
|
||
|
|
// 抛出事件
|
||
|
|
this.$emit('chooseGe',{url,index})
|
||
|
|
if(url) {
|
||
|
|
uni.navigateTo({url})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|