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

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

原文地址:https://www.cnblogs.com/YYW303/p/9427753.html

时间: 2024-11-14 18:33:15

微信小程序之多列表的显示和隐藏功能(附源码)的相关文章

微信小程序,我的英雄列表

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下载完成之后默认安装即可 2.新建项目 打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录

微信小程序 - 展开收缩列表

代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}"> 2 <view class="kind-list-item"> 3 <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-h

神技!微信小程序(应用号)抢先入门体验(附最新案例-豆瓣电影)持续更新

微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.g

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

分贝显示器,实时显示声音强度(附源码)

使用 摄像头.麦克风.扬声器测试程序 一文中提到的技术,我们可以基本实现QQ的语音视频测试向导的功能了.但是,我觉得语音测试这块的体验还可以做得更好一点,就像QQ语音测试一样,实时显示麦克风采集到的声音的强度: 接下来,我们做个小demo,来实现类似的功能.先上demo运行起来的截图: (界面确实比较丑,我们这里的重点在于技术方面如何实现,如果你愿意花点时间,可以将其美化得跟QQ的那个一样漂亮^_^) 1.实现思路 实现这个小例子的主要思路如下: (1)使用OMCS采集和播放从麦克风的输入数据(

微信小程序点击列表跳转到对应详情页

点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 原文地址:https://www.cnblogs.com/zxmonster/p/11583729.html

微信小程序swiper使用网络图片不显示问题

@ wxml代码: <view class="container"> <swiper indicator-dots="true}" autoplay="true" interval="3000" duration="1"> <block wx:for="{{imgUrls}}" wx:key="*this"> <swiper-

微信小程序点击列表添加 去除属性

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式 wxml: <view> <view wx:for="{{list}}" wx:key="num" class="list" > <text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active&quo

小程序的多列表的展示与隐藏

项目下载: 1.https://download.csdn.net/download/mo3408/10727141 2.下载:https://www.lanzous.com/i24jlvc  密码:eng4 3.链接:https://share.weiyun.com/5tKPpcO 密码:kpgvdi(永久) 1.一开始没有展开前: 展开后: 页面的代码: 1 <view class='content'> 2 3 <block wx:for="{{systemList}}&q