600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 隐藏部分内容 点击按钮显示全部内容

隐藏部分内容 点击按钮显示全部内容

时间:2020-10-04 08:16:04

相关推荐

隐藏部分内容 点击按钮显示全部内容

有时候页面显示同种列表数据太多用户看到的信息种类就会变少,于是就需要每个种类列表数据默认显示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;},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。