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

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

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;},

隐藏部分内容，点击按钮显示全部内容相关推荐

原生JS实现点击按钮显示更多内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
点击按钮显示文字，再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字点击按钮显示文字,再次点击按钮隐藏文字通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
react实现div隐藏_React 点击按钮显示div与隐藏div
React 点击按钮显示div与隐藏div .m-test{width: 100px;height: 100px;background-color: red;} class Toggle extend ...
项目--点击按钮显示资料，点击空白处隐藏资料
点击空白处隐藏资料点击按钮显示资料在这里插入代码片 <!DOCTYPE html> <html lang="en"><head><met ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
php按钮如何加显示不出来,javascript - 点击按钮显示更多，自定义变量显示不出来？...
点击按钮显示更多,自定义变量显示不出来? 提示错误信息:. 想要达到的效果: 点击按键一次更多,多显示3条信息显示更多支持小明1这是我的个性签名 288个赞同本回答分成[旅游版]和[日常版] ...
Android/安卓点击按钮显示密码
在做app的时候,我们经常会做一个登陆界面,登陆时需要输入账号密码,并且输入时要求密码不可见,但是我们观察会发现大部分app都会提供一个按钮,点击查看输入的密码是否正确,那么怎么实现呢? 效果视频点 ...

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

隐藏部分内容，点击按钮显示全部内容相关推荐

最新文章

热门文章