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

发布时间：2020-12-14 20:05:27 所属栏目：资源来源：网络整理

导读：今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过wx:if判断就可实现，现在要实现多列表的单项显示和隐藏功能应该如何实现呢？如果还用wx:if实现的话会出现点击一个列表项，多个列表同时显示和隐藏，明显不适合功能需求，然后简单地查了

今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过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源码地址：

总结

以上所述是小编给大家介绍的微信小程序之多列表的显示和隐藏功能【附源码】。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!