小程序实现列表展开收起效果


Posted in Javascript onJuly 29, 2020

本文实例为大家分享了小程序实现列表展开收起的具体代码,供大家参考,具体内容如下

效果:

小程序实现列表展开收起效果

原理:利用AppData值 + 显示隐藏的样式,进行展开收起。

wxml:

<view bindtap="toChange" data-show='isShow'>{{isShow?'收起':'展开'}}<view>
<view class="{{isShow?'db' : 'dn'}}">这是你要收起展开的内容</view>

js:

Page({\
  data: {
  isShow: true, //true为展开
  },
  /*
  * isShow做取反操作
  * */
  toChange (e) {
  let that = this;
  let name = e.currentTarget.dataset.show;
  let param = {};
  param[name] = !that.data[name];
  that.setData({
   ...param
  })
  },
 })

wxss:

.db{
 display:block;
}
.dn{
 display:none;
}

这个原理其实够正常的收起展开了,但是碰上列表,还需要调整一下,那么问题来了,如何让小程序列表中展示明细?

列表效果:

小程序实现列表展开收起效果

想法:利用AppData值 + 显示隐藏的样式,进行展开收起。还要加上“数据污染”。

js:

page({
data:{
 list:[{id:1},{id:2}],
},
toShowItem(e) {
 let that = this;
 let id = e.currentTarget.dataset.id,
  show = e.currentTarget.dataset.show;
 that.data.list.forEach(function (v) {
  if (v.id == id) {
  v.show = !show;//这里污染原始数组数据
  }
 })
 //利用污染,对列表设置值
 this.setData({
  list: this.data.list
 })
 }
})

wxml:

<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="item">
 <view bindtap="toShowItem" data-id='{{item.id}}' data-show='{{item.show}}'>
  <text>{{item.show?'收起明细':'明细'}}</text>
 </view>
 <view class="{{item.show ? 'db' : 'dn'}}">
  这里是你展开收起的内容
 </view>
</view>

这里只是分享一个想法,要是想用直接粘贴,是达不到效果图的效果的,毕竟不是所有的样式都放上来了。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
vue模块移动组件的实现示例
May 20 Javascript
jquery实现简单自动轮播图效果
Jul 29 #jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 #Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 #Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 #Javascript
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JS实现复制功能
2017/03/01 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
python实现求特征选择的信息增益
2018/12/18 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
介绍一下write命令
2012/09/24 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
个人简历自荐信
2013/12/05 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
促销活动总结范文
2014/04/30 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
如何书写授权委托书?
2019/06/25 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB