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

简介: 列表缩放
<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"
  }
}
相关文章
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
80 0
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,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属性的说明
|
4月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
881 0
|
4月前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
395 0
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
109 0
|
4月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
120 0
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
130 0
|
22天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
148 3
|
29天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
40 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目