有时候页面显示同种列表数据太多用户看到的信息种类就会变少,于是就需要每个种类列表数据默认显示2-3条,用户想查看全部点击按钮即可。
未点击显示全部推荐的效果
点击了显示全部的效果
图看完了,接着直接上代码
html
<view class="recommend-list"><view class="coach-row coach-recommend-list"><view class="coach-row"><view class="iconfont icondianzan-ash-green"></view><view class="recommend-left-list">推荐列表</view></view><view class="recommend-right-num">推荐数量 {{recommendList.length|| 0}}</view></view><viewList :isArena='isArena' :recommendList='showRecommendList' v-if="recommendList.length>0"></viewList><view class="loading" v-else>暂无数据</view><view class="pull-down" v-if="recommendList.length>2" @click="changeRecommendState"><view class="pull-down-text">{{brandRecommend?'显示全部推荐':'收起推荐列表'}}</view><view class="iconfont iconshuangxiala" v-if="brandRecommend"></view><view class="iconfont iconshuangshangla" v-else></view></view></view>
js
data() {return {recommendList: [],brandRecommend: true};},computed: {showRecommendList: {get: function() {if (this.brandRecommend) {if (this.recommendList.length < 3) {return this.recommendList}let newArr = []for (var i = 0; i < 2; i++) {let item = this.recommendList[i]newArr.push(item)}return newArr}return this.recommendList},set: function(val) {this.showRecommendList = val}},}//控制显示,收起全部推荐changeRecommendState() {this.brandRecommend = !this.brandRecommend;},