微信小程序之多列表的表现和隐蔽功能附源码

标签:程序,之多,列表,表现,隐蔽,功能,源码 发布时间:2018年06月24日 点击26

今天在项目遇到一个题目,之前在项目首页实现单列表的表现和隐蔽西安人事考试报名,通过wx:if判断就可实现,如今要实现多列表的单项表现和隐蔽功能应该如何实现呢?假如还用wx:if实现的话会出现点击一个列表项德龙驾驶室总成,多个列表同时表现和隐蔽,显明不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路...

结果图:

表现和隐蔽.gif 


实现思路:

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

好了,思路有了百度优化,就开始按照思路来用代码验证。果不其然,使用代码实现之后液压泵马达,发现本身的思路照旧没错的。此功能点也可以应用到其它类似的列表的表现和隐蔽中。

示例代码:

  1. <!--pages/myOrder/myOrder.wxml-->
  2. <view class='container'>
  3. <!-- 订单列表 -->
  4. <block wx:for-items="{{carInfoData}}">
  5. <view class='card b-shadow' bindtap='toggleBtn' id="{{item.id}}">
  6. <view class='nearCard-fl'>
  7. <image src='{{item.imgurl}}'></image>
  8. </view>
  9. <view class='nearCard-fr'>
  10. <view>日期:
  11. <text class='c-green'>{{item.useDate}}</text>
  12. </view>
  13. <view>车型:
  14. <text class='c-green'>{{item.cx}}</text>
  15. </view>
  16. <view>时长:
  17. <text class='c-green'>{{item.time}}</text>
  18. </view>
  19. <view>费用:
  20. <text class='c-green'>{{item.feiyong}}</text>
  21. </view>
  22. </view>
  23. <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
  24. <view class='ml30'>启用时间:2018.01.01 11:33</view>
  25. <view class='ml30'>结束时间:2018.01.01 11:33</view>
  26. <view class='ml30'>租赁地区:舟山市桃花岛景区海湾浪琴</view>
  27. <view class='feedBack'>意见反馈</view>
  28. </view>
  29. </view>
  30. </block>
  31. </view>
  1. // pages/myOrder/myOrder.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. uhide: 0
  8. },
  9. /**
  10. * 生命周期函数--监听页面加载
  11. */
  12. onLoad: function (options) {
  13. var that = this;
  14. var data = {
  15. "datas": [
  16. {
  17. "id": 1,
  18. "imgurl": "../../images/car.png",
  19. "useDate": "2017-12-22",
  20. "cx": "奇瑞EQ1",
  21. "time": "1小时",
  22. "feiyong": "20元"
  23. },
  24. {
  25. "id": 2,
  26. "imgurl": "../../images/car.png",
  27. "useDate": "2017-12-22",
  28. "cx": "奇瑞EQ1",
  29. "time": "1小时",
  30. "feiyong": "20元"
  31. },
  32. {
  33. "id": 3,
  34. "imgurl": "../../images/car.png",
  35. "useDate": "2017-12-22",
  36. "cx": "奇瑞EQ1",
  37. "time": "1小时",
  38. "feiyong": "20元"
  39. },
  40. {
  41. "id": 4,
  42. "imgurl": "../../images/car.png",
  43. "useDate": "2017-12-22",
  44. "cx": "奇瑞EQ1",
  45. "time": "1小时",
  46. "feiyong": "20元"
  47. }
  48. ]
  49. };
  50. //console.log(data.datas);
  51. //设置车辆展示信息
  52. that.setData({
  53. carInfoData: data.datas
  54. })
  55. },
  56. //点击切换隐蔽和表现
  57. toggleBtn: function (event) {
  58. var that = this;
  59. var toggleBtnVal = that.data.uhide;
  60. var itemId = event.currentTarget.id;
  61. if (toggleBtnVal == itemId) {
  62. that.setData({
  63. uhide: 0
  64. })
  65. } else {
  66. that.setData({
  67. uhide: itemId
  68. })
  69. }
  70. }
  71. })

GitHub源码地址:小程序表现和隐蔽


手机网站建设