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


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 相关文章推荐
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
清除输入框内的空格
Dec 21 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python如何实现异步调用函数执行
2019/07/08 Python
python能做什么 python的含义
2019/10/12 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
2014年采购员工作总结
2014/11/18 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2014年个人总结范文
2015/03/09 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技