51Y58PICRDJ.jpg
今天在項(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í)顯示和隱藏，明顯不適合功能需求，然后簡(jiǎn)單地查了資料也沒發(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)用到其它類似的列表的顯示和隱藏中。
示例代碼：
<!--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>時(shí)長(zhǎng)：
<text class='c-green'>{{item.time}}</text>
</view>
<view>費(fèi)用：
<text class='c-green'>{{item.feiyong}}</text>
</view>
</view>
<view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
<view class='ml30'>啟用時(shí)間：2018.01.01 11:33</view>
<view class='ml30'>結(jié)束時(shí)間：2018.01.01 11:33</view>
<view class='ml30'>租賃地區(qū)：舟山市桃花島景區(qū)海灣浪琴</view>
<view class='feedBack'>意見反饋</view>
</view>
</view>
</block>
</view>
// pages/myOrder/myOrder.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
uhide: 0
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this;
var data = {
"datas": [
{
"id": 1,
"imgurl": "../../images/car.png",
"useDate": "2017-12-22",
"cx": "奇瑞EQ1",
"time": "1小時(shí)",
"feiyong": "20元"
},
{
"id": 2,
"imgurl": "../../images/car.png",
"useDate": "2017-12-22",
"cx": "奇瑞EQ1",
"time": "1小時(shí)",
"feiyong": "20元"
},
{
"id": 3,
"imgurl": "../../images/car.png",
"useDate": "2017-12-22",
"cx": "奇瑞EQ1",
"time": "1小時(shí)",
"feiyong": "20元"
},
{
"id": 4,
"imgurl": "../../images/car.png",
"useDate": "2017-12-22",
"cx": "奇瑞EQ1",
"time": "1小時(shí)",
"feiyong": "20元"
}
]
};
//console.log(data.datas);
//設(shè)置車輛展示信息
that.setData({
carInfoData: data.datas
})
},
//點(diǎn)擊切換隱藏和顯示
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源碼地址：小程序顯示和隱藏
其它文章請(qǐng)?jiān)L問：
