前端之家收集整理的这篇文章主要介绍了
微信小程序之多列表的显示和隐藏功能【附源码】，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过wx:if判断就可实现，现在要实现多列表的单项显示和隐藏功能应该如何实现呢？如果还用wx:if实现的话会出现点击一个列表项，多个列表同时显示和隐藏，明显不适合功能需求，然后简单地查了资料也没发现有类似的功能，最后思考一番后，慢慢地理清了思路...
效果图：
实现思路：
- 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项，可以用数据的id；
- css中定义一个hidden{display：none}控制显示和隐藏，然后通过三元运算符来判断；
- wxml定义一个点击事件来动态修改这个列表项的变量值。
好了，思路有了，就开始按照思路来用代码验证。果不其然，使用代码实现之后，发现自己的思路还是没错的。此功能点也可以应用到其它类似的列表的显示和隐藏中。
示例代码：
日期：
{{item.useDate}}
车型：
{{item.cx}}
时长：
{{item.time}}
费用：
{{item.feiyong}}
启用时间：2018.01.01 11:33
结束时间：2018.01.01 11:33
租赁地区：舟山市桃花岛景区海湾浪琴
意见反馈
// 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,{
"id": 3,{
"id": 4,"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源码地址：小程序显示和隐藏
总结
以上所述是小编给大家介绍的微信小程序之多列表的显示和隐藏功能【附源码】。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/weapp/31195.html
