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

2024-09-28 12:00:46

今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过wx:if判断就可实现，现在要实现多列表的单项显示和隐藏功能应该如何实现呢？如果还用wx:if实现的话会出现点击一个列表项，多个列表同时显示和隐藏，明显不适合功能需求，然后简单地查了资料也没发现有类似的功能，最后思考一番后，慢慢地理清了思路...

效果图：

实现思路：

实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项，可以用数据的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
  })
 }
 }
})

GitHub源码地址：小程序显示和隐藏

总结

以上所述是小编给大家介绍的微信小程序之多列表的显示和隐藏功能【附源码】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序loading组件显示载入动画用法示例【附源码下载】

本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index
微信小程序动态显示项目倒计时效果

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
微信小程序实现动态显示和隐藏某个控件

微信小程序实现动态显示和隐藏某个控件在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChangeShowState">{{sh
微信小程序 scroll-view隐藏滚动条详解

一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事
微信小程序图片宽100%显示并且不变形

微信小程序图片宽100%显示并且不变形按照HTML习惯进行写,代码: <view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下: 很明显变形了找到一篇关于微
详解微信小程序通过控制CSS实现view隐藏与显示

详解微信小程序通过控制CSS实现view隐藏与显示实现效果图: 视图代码,使用变量控制隐藏类名 <scroll-view scroll-y="true" > <view class="user_freeback"> <view class="txt"> <text> 为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复.</text> </view&g
微信小程序使用image组件显示图片的方法【附源码下载】

本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{
微信小程序之获取当前位置经纬度以及地图显示详解

最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增页面需要在app.json进行配置: "pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ] 通过在视图层调用bindtap与逻辑
微信小程序动态的显示或隐藏控件的方法(两种方法)

在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>
微信小程序之多列表的显示和隐藏功能【附源码】

今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和
微信小程序实现动态设置页面标题的方法【附源码下载】

本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g
微信小程序轮播图swiper详解及实例（源码下载）

微信小程序 swiper 轮播图前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码
微信小程序高德地图SDK详解及简单实例（源码下载）

微信小程序高德地图SDK: 简介微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍账号与Key的申请注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南最后更新时间: 2017年1月9日本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具按照微信小程序开发文档下载并安装微信小
微信小程序实现动态列表项的顺序加载动画

本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下效果思路 1.最开始用了纯CSS动画animation,发现动画需要重复写,于是换使用transition动画. 2.使用onReady()可以让页面加载好再显示动画以免动画提前结束. 代码 wxml  <view wx:for="{{lists}}" class="common"
微信小程序实现左右列表联动

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下效果图: 直接上代码: wxml界面: <view class='header'> <text class='headerClass'>分类</text> <text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'&g
微信小程序如何实现列表渲染和条件渲染

目录概述: 循环渲染: 渲染目标是列表时: 渲染目标为字典时: 总结概述: 要实现列表渲染我们首先要介绍一下< block标签. 该标签不会再列表中做任何渲染,一般当做容器使用. 我们可以在标签中加入限定元素来实现控制渲染效果. 例如,当我们需要渲染某个限定条件时可以写成: <block wx:if="{{case_length}}"> </block> 而当我们需要循环渲染某个列表时可以写成: <label class="radio&
微信小程序教程之列表渲染

系列文章: 微信小程序教程之WXSS 微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view wx:for="{{items}}"> {{index}}:
微信小程序使用progress组件实现显示进度功能【附源码下载】

本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关
微信小程序点击列表跳转到对应详情页过程解析

这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

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

相关推荐

随机推荐