微信小程序——收起和查看更多功能
项目中做一些列表的时候,可能会需要做到 查看更多 及 收起功能,如下图所示:
大概的需求就是默认只显示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 服务器:阿里云 这里介绍微信小程序如何 ...
随机推荐
- Spring Security教程(一):初识Spring Security
一.概要 Spring Security,这是一种基于 Spring AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权.以 ...
- css遮罩层
父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...
- java: 保留两位小数4种方法
import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...
- 由于出现以下异常,无法生成模型:“System.Data.StrongTypingException: 表“TableDetails”中列“IsPrimaryKey”的值为 DBNull。
Entity Framework (version 6.0.0.0) and MySQL Server (>= 5.7.11) 在使用EF中,从数据库中更新模型 操作.报错! 解决办法: 1. ...
- Solr实现 并集式、多值、复杂 过滤查询的权限【转】
公司开发使用的搜索引擎核心是Solr,但是应为业务原因,需要相对复杂权限机制. 1)通过Solr的filterQuery可以实现field过滤,实现过滤项的效果.索引A{filter1:a,field ...
- 一、图解Java中String不可变性
这里有一堆例子来说明Java的String的不可变性. 1.声明一个String String s = "abcd"; s 变量保存string对象的引用,下面的箭头解释成保存了哪 ...
- electron 创建右键菜单
1.引入模块 const Electron = require('electron'); const remote = Electron.remote; const Menu = remote.Men ...
- YGC和FGC发生时间
1.YGC和FGC是什么 YGC :对新生代堆进行gc.频率比较高,因为大部分对象的存活寿命较短,在新生代里被回收.性能耗费较小. FGC :全堆范围的gc.默认堆空间使用到达80%(可调整)的时候会 ...
- 【Ubuntu】任务管理器loadruner
linux1 准备工作 可以通过两种方法验证服务器上是否配置了rstatd守护程序: ①使用rup命令,它用于报告计算机的各种统计信息,其中就包括rstatd的配置信息.使用命令rup 10 ...
- JAVA-JSP内置对象之request对象的其他方法
相关资料:<21天学通Java Web开发> request对象的其他方法1.request对象除了可以用来获得请求参数,还可以用来获得HTTP标头及其他信息. 方法 ...