微信小程序之多列表的显示和隐藏功能【附源码】


Posted in Javascript onAugust 06, 2018

今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路...

效果图:

微信小程序之多列表的显示和隐藏功能【附源码】

实现思路:

  • 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id;
  • css中定义一个hidden{display:none}控制显示和隐藏,然后通过三元运算符来判断;
  • wxml定义一个点击事件来动态修改这个列表项的变量值。

功能实现:

好了,思路有了,就开始按照思路来用代码验证。果不其然,使用代码实现之后,发现自己的思路还是没错的。此功能点也可以应用到其它类似的列表的显示和隐藏中。

示例代码:

<!--pages/myOrder/myOrder.wxml-->
<view class='container'>
 <!-- 订单列表 -->
 <block wx:for-items="{{carInfoData}}">
 <view class='card b-shadow' bindtap='toggleBtn' id="{{item.id}}">
  <view class='nearCard-fl'>
  <image src='{{item.imgurl}}'></image>
  </view>
  <view class='nearCard-fr'>
  <view>日期:
   <text class='c-green'>{{item.useDate}}</text>
  </view>
  <view>车型:
   <text class='c-green'>{{item.cx}}</text>
  </view>
  <view>时长:
   <text class='c-green'>{{item.time}}</text>
  </view>
  <view>费用:
   <text class='c-green'>{{item.feiyong}}</text>
  </view>
  </view>
  <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
  <view class='ml30'>启用时间:2018.01.01 11:33</view>
  <view class='ml30'>结束时间:2018.01.01 11:33</view>
  <view class='ml30'>租赁地区:舟山市桃花岛景区海湾浪琴</view>
  <view class='feedBack'>意见反馈</view>
  </view>
 </view>
 </block>
</view>
// pages/myOrder/myOrder.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 uhide: 0
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 var data = {
  "datas": [
  {
   "id": 1,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 2,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 3,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 4,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  }
  ]
 };
 //console.log(data.datas);
 //设置车辆展示信息
 that.setData({
  carInfoData: data.datas
 })
 },
 //点击切换隐藏和显示
 toggleBtn: function (event) { 
 var that = this;
 var toggleBtnVal = that.data.uhide;
 var itemId = event.currentTarget.id; 
 if (toggleBtnVal == itemId) {
  that.setData({
  uhide: 0
  })
 } else {
  that.setData({
  uhide: itemId
  })
 } 
 }
})

GitHub源码地址:小程序显示和隐藏

总结

以上所述是小编给大家介绍的微信小程序之多列表的显示和隐藏功能【附源码】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 #Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 #Javascript
ES6 中可以提升幸福度的小功能
Aug 06 #Javascript
原生JS实现的轮播图功能详解
Aug 06 #Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 #Javascript
animate.css在vue项目中的使用教程
Aug 05 #Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
洗车工岗位职责
2014/03/15 职场文书
婚前协议书怎么写
2014/04/15 职场文书
学校工作推荐信范文
2014/07/11 职场文书
会计个人实习计划书
2014/08/15 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书