微信小程序中如何实现多列表的显示和隐藏功能

这篇文章将为大家详细讲解有关微信小程序中如何实现多列表的显示和隐藏功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

为章丘等地区用户提供了全套网页设计制作服务,及章丘网站建设行业解决方案。主营业务为网站建设、成都网站建设、章丘网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

效果图:

微信小程序中如何实现多列表的显示和隐藏功能

实现思路:

  • 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的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,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 3,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 4,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "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
  })
 } 
 }
})

关于“微信小程序中如何实现多列表的显示和隐藏功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站题目:微信小程序中如何实现多列表的显示和隐藏功能
分享网址:http://bzwzjz.com/article/gggjee.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都品牌网站设计 重庆手机网站建设 成都网站设计 企业手机网站建设 企业网站设计 LED网站设计方案 成都网站建设公司 成都做网站建设公司 成都网站制作 专业网站建设 成都网站建设 高端品牌网站建设 做网站设计 盐亭网站设计 营销网站建设 成都定制网站建设 成都网站制作 上市集团网站建设 H5网站制作 成都网站建设 成都营销网站制作 外贸网站建设