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


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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
用PHP产生动态的影像图
2006/10/09 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
虚拟机下载python是否需要联网
2020/07/27 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
Noon埃及:埃及在线购物
2019/11/26 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
环境保护与污染治理求职信
2014/07/16 职场文书
社团招新宣传语
2015/07/13 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang