小程序循环列表点击展开收缩

简介: 列表缩放
<view><scroll-viewstyle="background:white"class="con"><viewbindtap='tapItem'data-id='{{ model.id }}'data-text='{{ model.name }}'data-nodes="{{model.nodes}}"class="text">{{ model.name }}</view><viewwx:if='{{ isBranch }}'bindtap='toggle'class="img"><imagesrc=" {{ open ? '../../images/down.png' : '../../images/right1.png' }}"></image></view><viewwx:elseclass="imgnone"></view></scroll-view><viewwx:if='{{ isBranch }}'hidden='{{ !open }}'><mytreewx:for='{{ model.nodes }}'wx:key='id'model='{{ item }}'></mytree></view></view>
Component({
  properties: {
    model: Object,
  },
  data: {
    open: false,
    isBranch: false,
  },
  methods: {
    toggle: function (e) {
      if (this.data.isBranch) {
        this.setData({
          open: !this.data.open,
        })
      }
    },
    tapItem: function (e) {
      var itemid = e.currentTarget.dataset.id;
      var text = e.currentTarget.dataset.text;
      var nodes = e.currentTarget.dataset.nodes
      this.triggerEvent('tapitem', { id: itemid, text: text,nodes:nodes},{ bubbles: true, composed: true }); 
      //console.log('arr', this.properties.model)
    },
  },
  ready: function (e) {
    //console.log(this.data);
    this.setData({
      isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length),
    });
  },
})
/* pages/tree/tree.wxss */
.con image{
  width: 25px;
  height: 25px;
  margin-top: 12px;
}
.con{
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(228, 227, 227);
}
.text{
  float: left;
  margin-left: 3%;
  width: 60%;
}
.img{
  text-align: right;
}
.imgnone{
  width: 100%;
  height: 100%;
  background-color: rgb(241, 246, 247);
}
{
  "component": true,
  "usingComponents": {
    "mytree": "../tree/tree"
  }
}
相关文章
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
289 0
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
1280 0
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
2003 0
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
429 0
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
355 0
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
428 0
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
499 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
314 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
213 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章