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


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 EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP实现文件上传与下载
2020/08/28 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
给民警的表扬信
2014/01/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
小学毕业感言300字
2014/02/19 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
工作评语大全
2014/04/26 职场文书
争先创优公开承诺书
2014/08/30 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书