今天在項(xiàng)目碰到一個(gè)問題，之前在項(xiàng)目首頁實(shí)現(xiàn)單列表的顯示和隱藏，通過wx:if判斷就可實(shí)現(xiàn)，現(xiàn)在要實(shí)現(xiàn)多列表的單項(xiàng)顯示和隱藏功能應(yīng)該如何實(shí)現(xiàn)呢？如果還用wx:if實(shí)現(xiàn)的話會(huì)出現(xiàn)點(diǎn)擊一個(gè)列表項(xiàng)，多個(gè)列表同時(shí)顯示和隱藏，明顯不適合功能需求，然后簡單地查了資料也沒發(fā)現(xiàn)有類似的功能，最后思考一番后，慢慢地理清了思路...

效果圖：

顯示和隱藏.gif 

實(shí)現(xiàn)思路：

實(shí)現(xiàn)單個(gè)列表的顯示和隱藏應(yīng)該使用唯一元素讓程序知道你應(yīng)該顯示和隱藏哪個(gè)列表項(xiàng)，可以用數(shù)據(jù)的id； 
css中定義一個(gè)hidden{display：none}控制顯示和隱藏，然后通過三元運(yùn)算符來判斷； 
wxml定義一個(gè)點(diǎn)擊事件來動(dòng)態(tài)修改這個(gè)列表項(xiàng)的變量值。 
功能實(shí)現(xiàn)：

好了，思路有了，就開始按照思路來用代碼驗(yàn)證。果不其然，使用代碼實(shí)現(xiàn)之后，發(fā)現(xiàn)自己的思路還是沒錯(cuò)的。此功能點(diǎn)也可以應(yīng)用到其它類似的列表的顯示和隱藏中。

示例代碼：

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>時(shí)長：
17. <text class='c-green'>{{item.time}}</text>
18. </view>
19. <view>費(fèi)用：
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'>啟用時(shí)間：2018.01.01 11:33</view>
25. <view class='ml30'>結(jié)束時(shí)間：2018.01.01 11:33</view>
26. <view class='ml30'>租賃地區(qū)：舟山市桃花島景區(qū)海灣浪琴</view>
27. <view class='feedBack'>意見反饋</view>
28. </view>
29. </view>
30. </block>
31. </view>

1. // pages/myOrder/myOrder.js
2. Page({
3.  
4. /**
5. * 頁面的初始數(shù)據(jù)
6. */
7. data: {
8. uhide: 0
9. },
10.  
11. /**
12. * 生命周期函數(shù)--監(jiān)聽頁面加載
13. */
14. onLoad: function (options) {
15. var that = this;
16.  
17. var data = {
18. "datas": [
19. {
20. "id": 1,
21. "imgurl": "../../images/car.png",
22. "useDate": "2017-12-22",
23. "cx": "奇瑞EQ1",
24. "time": "1小時(shí)",
25. "feiyong": "20元"
26. },
27. {
28. "id": 2,
29. "imgurl": "../../images/car.png",
30. "useDate": "2017-12-22",
31. "cx": "奇瑞EQ1",
32. "time": "1小時(shí)",
33. "feiyong": "20元"
34. },
35. {
36. "id": 3,
37. "imgurl": "../../images/car.png",
38. "useDate": "2017-12-22",
39. "cx": "奇瑞EQ1",
40. "time": "1小時(shí)",
41. "feiyong": "20元"
42. },
43. {
44. "id": 4,
45. "imgurl": "../../images/car.png",
46. "useDate": "2017-12-22",
47. "cx": "奇瑞EQ1",
48. "time": "1小時(shí)",
49. "feiyong": "20元"
50. }
51. ]
52. };
53. //console.log(data.datas);
54. //設(shè)置車輛展示信息
55. that.setData({
56. carInfoData: data.datas
57. })
58. },
59.  
60. //點(diǎn)擊切換隱藏和顯示
61. toggleBtn: function (event) {
62. var that = this;
63. var toggleBtnVal = that.data.uhide;
64. var itemId = event.currentTarget.id;
65. if (toggleBtnVal == itemId) {
66. that.setData({
67. uhide: 0
68. })
69. } else {
70. that.setData({
71. uhide: itemId
72. })
73. }
74. }
75. })