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

项目下载:

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}}">
 4       <!-- 列表 -->
 5       <view class=‘list‘>
 6         <view class=‘list_title‘>{{item.title}}</view>
 7         <view class="list_info {{item.hidden?‘hide‘:‘show‘}}" >{{item.contentH}}</view>
 8         <image src="{{item.image}}" class=‘down‘  data-id="{{item.id}}" bindtap=‘moreInfo‘></image>
 9         <view class=‘time‘>{{item.time}}</view>
10       </view>
11       <!-- 列表 -->
12       </block>
13
14     </view>

模拟数据:

 1 //index.js模拟数据
 2 Page({
 3
 4   /**
 5    * 页面的初始数据
 6    */
 7   data: {
 8     isFold: false,
 9     nowToggle:‘‘,
10     systemList: [{
11       id: 0,
12       hidden: true,
13       title: ‘系统公告‘,
14       contentH: ‘关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往‘,
15       time: ‘2018-02-10 18:05:42‘,
16       image: ‘../../img/up.png‘
17     },
18     {
19       id: 1,
20       hidden: true,
21       title: ‘系统公告‘,
22       contentH: ‘关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往‘,
23       time: ‘2018-03-15 18:05:42‘,
24       image: ‘../../img/up.png‘
25     },
26     {
27       id: 2,
28       hidden: true,
29       title: ‘系统公告‘,
30       contentH: ‘关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往‘,
31       time: ‘2018-05-11 18:05:42‘,
32       image: ‘../../img/up.png‘
33     },
34     {
35       id: 3,
36       hidden: true,
37       title: ‘系统公告‘,
38       contentH: ‘关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...;2.如果您的退款情况变为已退款状态,请及时前往请及时前往11111111111111111111‘,
39       time: ‘2018-06-14 18:05:42‘,
40       image:‘../../img/up.png‘
41     },
42     ]
43   },
44
45   /**
46    * 生命周期函数--监听页面加载
47    */
48   onLoad: function (options) {
49
50
51   },
52
53   //展开更多
54   moreInfo: function (e) {
55     var id=e.currentTarget.dataset.id
56     var systemList=this.data.systemList
57     var that=this
58     var hide=systemList[id].hidden
59
60     if(systemList[id].image=="../../img/down.png"){
61
62       that.setData({
63         [‘systemList[‘+id+‘].hidden‘]:!hide,
64         [‘systemList[‘ + id + ‘].image‘]:‘../../img/up.png‘
65       })
66
67     }else{
68       that.setData({
69         [‘systemList[‘ + id + ‘].hidden‘]:!hide,
70         [‘systemList[‘ + id + ‘].image‘]: ‘../../img/down.png‘,
71
72       })
73       console.log(systemList)
74
75     }
76
77
78
79   },
80 })

原文地址:https://www.cnblogs.com/mo3408/p/9870389.html

时间: 2024-11-02 12:19:32

小程序的多列表的展示与隐藏的相关文章

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

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

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

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 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

Vue+koa2开发一款全栈小程序(8.图书列表页)

1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/controllers下新增booklist.js const {mysql}=require('../qcloud') module.exports=async(ctx)=>{ const books=await mysql('books').select('*').orderBy('id','des

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

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

python 小程序,在列表中找到所有指定内容的位置

要求如下图所示: 1 #!/usr/bin/python 2 # -*- coding=UTF-8 -*- 3 4 list=['10','11','xx','13','14','xx','16','17','xx','19'] 5 print '\n 原始数据为:',list,'\n' 6 list_count=list.count('xx') 7 y=0 8 for i in range(list_count): 9 list_tmp=list[y:] 10 y+=list_tmp.inde

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

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

微信小程序结合后台数据管理实现商品数据的动态展示、维护

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求Web API 平台获取JSON数据在小程序界面上进行动态展示. 1.整体性的架构设计 我们整体性的架构设计,包含一个Web管理后台.一个Web API统一接口层.当然还有数据库什么,另外还有一个小程序客户端.整个架构体系还是以我之前随笔介绍的<整合微信小程序的Web API接口层的架

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微