列表页面的展开以及收起
列表页面的展开以及收起
- 需求
- 想法
- 关键代码
- 结尾
需求
由于公司新需求 ,写一个列表页 ,不上拉加载 ,点击加载更多去加载 还会有收起按钮 。大概效果如下图所示:
想法
1,一开始想的是直接对数组进行切割 。然后每次点击加载更多重新加载 。但是这样之前加载的 又会重新加载一遍 。
2,最终决定 采用 将 之前的数据 保存下来 每次点击更多的时候 先回到原来的数据 。
好了 废话不多说了 上代码
关键代码
template部分
<template><div class="list"><div class="title">列表的展开以及收起</div><div class="list"><div v-for="(item,index) in showList" :key="index" class="box"><div>{{item.title}}{{index+1}}</div><div>{{item.type}}</div></div></div> <div class="load-more" @click="getList"><div>加载更多</div><div class="put-on" @click.stop="putOn" v-show="showList.length>2">收起</div></div></div>
</template>
js部分
export default {name:'collspan' ,data(){return{resList:[] ,//接口获取的数组showList:[] ,//展示的数组showAll:true ,//展示全部?}} ,methods:{getList(){if(!this.showAll){this.showAll = true ;this.showList = this.resList ;return ;}let obj = {'title': '标题','type': '内容'};console.log('调借口');this.resList.push(obj) ;this.resList.push(obj) ;this.showList = this.resList;},// 收起putOn(){// 切割数组 。 this.showList= this.showList.slice(0,2) ;this.showAll = false ;}},created(){this.getList(true) ;}
}
</script>
css部分
<style scoped>
.title{font-weight: 600;padding: 15px;
}
.list{background-color: #efefef;font-size: 15px;
}
.box{padding: 15px;background-color: #fff;color: #333;border-bottom: 1px solid #eeeeee;
}
.load-more{text-align: center;padding: 10px;position: relative;
}
.put-on{position: absolute;right: 15px;bottom: 10px;color: red;
}
</style>
结尾
希望能够好使吧 ,明日继续 !!!
列表页面的展开以及收起相关推荐
- SwiftUI 中列表行(List Row)展开和收起无动画或动画诡异的解决
文章目录 问题现象 问题分析 1. 为什么 List 行展开与收起没有动画效果? 2. 第一种解决方法 3. 另一种巧妙的解决 总结 结束语 问题现象 SwiftUI 中展开(expand)和收起(c ...
- 页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码
本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码 展开 收起 唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻 通:唯)问女何所思,问女何 ...
- Mr.J-- jQuery学习笔记(十六)--展开和收起动画折叠菜单的实现
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏 动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告 与动 ...
- 视频直播APP源码,通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果 一. 实现思路 需要设置一个变量控制展开 / 收起效果 提前写好最高高度的class样式,超出这个高度多余内容会隐藏 只有在列表数据长度 ...
- 【文本展开收起】uniapp—实现文本的展开与收起功能
一.实现效果 二.代码实现 2.1 思路: 1.根据文本显示的布局中,每行大致能显示的文字个数 2.首先加载页面时,根据文字总长度判断是否超出自定义行数,来处理相应的数据,多余自定义行数,截取对应的文 ...
- uni-app,文本实现展开、收起全文
效果: 思路: 1.根据文本显示的布局中,每行大致能显示的文字个数.(实例是大致每行26个文字) 2.首先加载页面时,根据文字总长度判断是否超出自定义行数,来处理相应的数据,多余自定义行数,截取对应的 ...
- android仿qq折叠,android列表收缩与展开仿QQ好友列表(非常详细,附源码)
好友QQ列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到android的E ...
- Listview列表收缩与展开——ExpandableListView
ExpandableListView是一个垂直滚动显示两级列表项的视图,与ListView不同的是,它可以有两层:每一层都能够被独立的展开并显示其子项. 好友QQ列表,可以展开,可以收起,在andro ...
- Android列表收缩与展开仿QQ好友列表(非常详细,附源码)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka ExpandableListView是一个垂直滚动显示两级列表项的视图,与ListView不同 ...
最新文章
- bootstrap上传文件美化
- leetcode算法题--重建二叉树
- (管道| / 重定向 / xargs)/find 与xargs结合使用/vi,grep,sed,awk(支持正则表达式的工具程序)
- OpenGL之利用矩阵的“平移”“旋转”“综合变换”等实现矩形的移动
- autohotkey+txt (3)+获得鼠标坐标
- CME比特币期货去年促成超1100万枚比特币交易量
- 高数教材班复习Hint(3.1-3.6)
- 提出辞职可以用的五个理由推荐给大家
- Java反射创建对象效率高还是通过new创建对象的效率高?
- DOM是什么?(超详细解释)
- 古月居ROS入门——话题、Publisher、Subscriber
- html 搜索历史记录,使用cookie实现历史搜索记录功能
- noip2011 公交观光
- GitHub 代码一键转 VS Code,太好用了!
- matlab示波器横轴变纵轴,excel表格横轴数据变纵轴-在EXCEL中做图表,横坐标和纵坐标如何调换?...
- 数据分析、数据挖掘、数据运营有啥区别?
- Unity AssetBundle学习笔记
- 软件项目管理:外包 outsourcing、采购 procurement、合同 contracts
- 我在拼多多这三年(转载)
- NETBOX BT大改造