收起/展开的页面封装

图片收起和展开页面封装组件

<style lang="scss" scoped>
.grid{
padding: 25rpx;
background: white;
.grid-flex{
display: flex;
flex-wrap: wrap;
}
.grid-item{
width: 140rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 160rpx;
}
.gird-icon{
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
// border-radius: 50%;
// background-color: rgba(139, 195, 74, 1);
text-align: center;
color: white;
font-size: 44rpx;
font-weight: bold;
}
.gird-text{
color: rgba(16, 16, 16, 1);
font-size: 24rpx;
text-align: center;
margin-top: 10rpx;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
</style>

<template>
<view class="grid">
<view class="grid-flex">
<view class="grid-item" v-for="(item,index) in list" :key="index" @click="gridItemClick(item.id)" v-if="index<10||showMore">
<image class="gird-icon" :src="item.iconUrl"></image>
<view class="gird-text">{{item.name}}</view>
</view>
</view>
<view style="color: #999999; font-size: 24rpx;text-align: center;line-height: 40rpx;" v-if="list.length>10" @click="showMoreChange">
<view v-if="showMore" style="display: flex; align-items: center;justify-content: center;">
<text>收起</text>
<text class="iconfont" style="font-size: 24rpx;transform: rotate(-90deg);">&#xe63b;</text>
</view>
<view v-else style="display: flex; align-items: center;justify-content: center;">
<text>查看更多</text>
<view class="iconfont" style="font-size: 24rpx;transform: rotate(90deg);">&#xe63b;</view>
</view>
</view>
</view>
</template>

<script>
export default {
props:{
list:{
type: Array,
required: true,
default:()=>[]
},
},
data(){
return{
showMore:false
}
},
watch:{
list(){
this.showMore=false
}
},
methods:{
showMoreChange(){
this.showMore=!this.showMore
},
gridItemClick(id){
uni.navigateTo({
url:'/pages/good/classify-list?id='+id
})
}
}
}
</script>