微信小程序——收起和查看更多功能
项目中做一些列表的时候,可能会需要做到 查看更多 及 收起功能,如下图所示:
大概的需求就是默认只显示2条,点击【查看更多】显示全部,点击【收起】还原。
实现的方法千万种。我来讲一下我的实现思路:
1.先判断列表的长度,如果小于3就不要【查看更多】这个按钮了。
2.根据索引的大小来判断它是默认显示还是隐藏。如果索引小于2就显示,大于2就隐藏。至于显示隐藏,我用的是class控制的。
3.再给【查看更多】和【收起】绑定点击事件。
代码如下:
wxml:
<view class="weui-cells mgt-0 {{!showMore? 'hiddenmore' : 'showmore'}}">
<view wx:for="{{rankList}}" wx:for-item="item" wx:for-index="idx" wx:key="" class="weui-cell {{idx>1 ? 'more-item' : ''}}">
<view class="weui-cell__bd ml-10">
<text class='fs-30 block'>nickname{{idx}}</text>
</view>
<view class="weui-cell__ft fc-66 fs-28">
砍了
<text class='fc-red'>¥{{item.amount}}</text>
</view>
</view>
</view>
<block wx:if="{{rankList.length>2}}">
<view wx:if="{{showMore}}" class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
收起
<icon class="shishuofont icon-list-close"></icon>
</view>
<view wx:else class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
查看更多
<icon class="shishuofont icon-list-open"></icon>
</view>
</block>
js:
主要的data数据:
data: {
showMore: false,
rankList:[],//这里面的数据是通过请求获取的
},
主要的方法:
listToggle: function () {
this.setData({
showMore: !this.data.showMore
})
},
wxss:
.hiddenmore .more-item {
display: none;
} .showmore .more-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
最后看一下解析结果(请注意看下我标注红色箭头的地方,再结合wxss品味一下):
默认的状态:
全部显示的状态:
路过的大神,如有更好的解决方案,可以多share share~~
微信小程序——收起和查看更多功能的更多相关文章
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- 微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 微信小程序背景音频播放分享功能
如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...
- 微信小程序实现连续扫码功能(uniapp)
注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...
- [转]微信小程序实现图片上传功能
本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...
随机推荐
- Python 的黏包问题
Client 端内的代码: #Author:BigBao #Date:2018/7/4 import socket import struct client=socket.socket(socket. ...
- xocodebulid 自动化打包 解决提示 ld: library not found for -lPods 问题
如果你的项目用到cocopod 第三方库.使用xcodebulid 估计会出现 ld: library not found for -lPods 以下 是我的解决办法 xcodebuild -work ...
- POJ 1636 Prison rearrangement DFS+0/1背包
题目链接: id=1636">POJ 1636 Prison rearrangement Prison rearrangement Time Limit: 3000MS Memor ...
- FFmpeg编译:jni not found 的问题
进入Android\Sdk\ndk-bundle\platforms\android-xx\arch-arm\usr目录查看发现与Google官方下载的NDK相比缺少include目录 此目录下包含各 ...
- Linux 移动或重命名文件/目录-mv 的10个实用例子
本文导航 -初识 mv 命令03% -1.移动文件08% -2.移动多个文件15% -3.移动目录23% -4.重命名文件或目录27% -5. 重命名目录35% -6. 打印移动信息39% -7. 使 ...
- 服务器搭建3 安装libevent2.0.20
1.检测是否安装 安装了的话应该是这样的:如果不是,那就装一下. root@iZ23nyl8frqZ:/home/upload# ls -a /usr/lib |grep libeventlibeve ...
- 【MySQL】MySQL层级数据的递归遍历
层级的业务数据在系统中很常见,如组织机构.商品品类等. 如果要获取层级数据的全路径,除了缓存起来,就是递归访问的方式了: 将层级数据缓存在redis中,用redis递归获取层级结构.此方法效率高. 在 ...
- 【Kryo】简单地使用Kryo
公司用Kryo,先接触下,简单记录下. 引入包 <dependencies> <dependency> <groupId>com.esotericsoftware& ...
- 搜索页面scroll下拉时候进行刷新,显示更多搜索值
1.封装扩展scroll.vue功能: //props传值 pullup:{ type:Boolean, default:false } _initScroll(){ if(!this.$refs.w ...
- Centos6.9安装JDK1.8
https://blog.csdn.net/zhangjm123/article/details/80784930