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


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 变量作用域 代码分析
Jun 26 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
Web应用开发TypeScript使用详解
May 25 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue实现分页组件
2020/06/16 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
总经理职责
2013/12/22 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
赤壁观后感(2)
2015/06/15 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2019公司管理制度
2019/04/19 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery