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

效果图：

实现思路：

实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项，可以用数据的id；
css中定义一个hidden{display：none}控制显示和隐藏，然后通过三元运算符来判断；
wxml定义一个点击事件来动态修改这个列表项的变量值。

功能实现：

好了，思路有了，就开始按照思路来用代码验证。果不其然，使用代码实现之后，发现自己的思路还是没错的。此功能点也可以应用到其它类似的列表的显示和隐藏中。

示例代码：

<!--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>时长：<text class='c-green'>{{item.time}}</text></view><view>费用：<text class='c-green'>{{item.feiyong}}</text></view></view><view class='down clearfix {{uhide==item.id?"":"hidden"}}'><view class='ml30'>启用时间：2018.01.01 11:33</view><view class='ml30'>结束时间：2018.01.01 11:33</view><view class='ml30'>租赁地区：舟山市桃花岛景区海湾浪琴</view><view class='feedBack'>意见反馈</view></view></view></block>
</view>
// 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})} }
})

转载于：https://www.jb51.net/article/145112.htm

二：

微信小程序
wxml代码

<view class='list'><block   wx:for='{{dataList}}' wx:key='list' wx:for-item="item"><view   class="list_item"><navigator  url='{{item.goods_id}}' bindtap="navigateToPage"  data-name='{{item.goods_title}}' id='{{item.goods_id}}' data-showType='{{item.showType}}'><view class='img'><image src="{{item.goods_img}}"  mode="scaleToFill"/></view><view  class='info'><view class='title'>{{item.goods_title}}</view><view class='score'>评分：{{item.goods_score}}</view><view class='actor'>导演：{{item.goods_director}}</view><view class="actor">主演：{{item.goods_actor}}</view><view class="price">价格：￥{{item.goods_price}}</view></view></navigator><view class='clear'></view></view></block>
</view>

其中 wx:for='{{dataList}}'是要显示的js中的数组名，wx:for-item="item"是下面{{item.goods_title}}要加的前缀，bindtap="navigateToPage"是绑定的触发事件名

JS代码

Page({/*** 页面的初始数据*/data: {dataList:[{goods_id:1,goods_title:'你好，李焕英',goods_img:'../img/movie1.png',goods_score:'9.5',goods_director:'贾玲',goods_actor:'贾玲，张小斐，沈腾...',goods_price:100},{goods_id:2,goods_title:'人潮汹涌',goods_img:'../img/movie2.png',goods_score:'9.1',goods_director:'饶晓志',goods_actor:'刘德华，肖央，万茜...'    ,goods_price:100}, {goods_id:3,goods_title:'唐人街探案3',goods_img:'../img/movie3.png',goods_score:'8.8',goods_director:'陈思诚',goods_actor:'王宝强，李昊然，妻夫木聪...',goods_price:100}, {goods_id:4,goods_title:'刺杀小说家',goods_img:'../img/movie4.png',goods_score:'8.6',goods_director:'路阳',goods_actor:'雷佳音，杨幂，董子健...',goods_price:100}, {goods_id:5,goods_title:'封神榜：哪吒重生',goods_img:'../img/movie5.png',goods_score:'8.7',goods_director:'赵霁',goods_actor:'杨天翔，张赫，宣晓鸣...',goods_price:100}],},
onLoad(){// 事件处理函数navigateToPage:function(e) {//e是获取到的点击数据console.log(e.currentTarget.id)console.log(e.currentTarget.dataset.name);for(var index in this.data.dataList){//循环遍历数组，   if(e.currentTarget.id==this.data.dataList[index]. goods_id){//如果点击的下标与电影id对应wx.setStorageSync('movie', this.data.dataList[index])//则将该电影数组以键值对方式存入缓存console.log(this.data.dataList[index])}}}
})

效果展示：

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

ssm+mysql+基于微信小程序的恋上诗词设计与实现毕业设计-附源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
springboot+基于微信小程序音乐播放器的设计与实现毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
springboot+基于微信小程序的心理医生系统的设计实现毕业设计-附源码191610
小程序springboot心理医生系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序【获取用户昵称头像和昵称（附源码）】
获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程前端源码:https://pan.baidu.com/s/1uz2Gm2FMB-8RFVkhlHY ...
基于springboot的农产品销售管理系统/电商项目/水果超市管理系统/微信小程序毕设/农村电商资源对接平台【附源码】
目录前言创新点/亮点✨ 毕设目录一.视频展示二.系统介绍需求分析 1.用户分析 2.平台构建必要性 3.类似平台对比平台设计思路 1.前台功能模块设计 2.后台功能模块设计三.项目地址 ...
(微信小程序毕业设计)小学生语文学习打卡项目开发(附源码+论文)
大家好!我是职场程序猿,感谢您阅读本文,欢迎一键三连哦.
基于微信小程序共享停车位设计与实现SSM_car.rar（项目源码+数据库文件+微信小程序开发+后端java语言）
主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...
2022基于微信小程序的图书馆座位预约管理系统.rar（论文+程序设计源码+数据库）毕业设计
随着时代不断的发展,我们对于知识的汲取需要从不同领域了解,从而扩大自己的知识面,图书馆作为大学生学习的宝地,有着不可替代的地位.但是在互联网信息化时代,传统模式下的图书馆管理模式,并不能满足校园学生需 ...

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

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

最新文章

热门文章