微信小程序实现简单的树形图treeview
app.json
的pages
里添加这么一行,"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/components/mytree/mytree"
],
ctrl+s或者ctrl+b一下,小程序就自动生成了mytree
的文件目录了,相信熟悉小程序开发的都知道。
首先修改mytree.json
:
{
"component": true,
}
这表示要开发一个组件(小程序官方说,也能当普通页面使)。
我们使用的树数据treeData
将是类似这样的,text
字段用于显示,id
字段用于点击事件传递数据,nodes
就是下一层节点。
var treeData = {
text: 'My Tree',
id: 0,
nodes: [
{
text: 'Parent 1',
id: 1,
nodes: [
{
text: 'Child 1',
id: 2,
nodes: [
{
text: 'Grandchild 1',
id: 3,
},
{
text: 'Grandchild 2',
id: 4,
},
]
},
{
text: 'Child 2',
id: 5,
}
]
},
{
text: 'Parent 2',
id: 6,
nodes: [
{
text: 'Child 1',
id: 7,
},
{
text: 'Child 2',
id: 8,
}
]
}
]
}
先写mytree.wxml
,比较简单,model
是后面绑定的属性值,也就是树的数据,待会儿看mytree.js
就明白了。
<!-- pages/components/mytree/mytree.wxml-->
<view>
<view>
<text wx:if='{{ isBranch }}' bindtap='toggle'>{{ open ? '[ - ]' : '[ + ]' }} </text>
<text wx:else>[ · ] </text>
<text bindtap='tapItem' data-itemid='{{ model.id }}'>{{ model.text }}</text>
</view>
<view style='padding-left: 50rpx;' wx:if='{{ isBranch }}' hidden='{{ !open }}'>
<mytree wx:for='{{ model.nodes }}' wx:key='id' model='{{ item }}'></mytree>
</view>
</view>
这里最关键的是使用了一个递归,也就是组件里使用了组件自己,那就需要回头修改一下mytree.json
,如下:
{
"component": true,
"usingComponents": {
"mytree": "../mytree/mytree"
}
}
mytree.js
,内容也不多,在data
里加了open
和isBranch
来判断当前节点是否是树枝(相对于树叶)、是否展开,其它没多少要解释的,一开始我也想把这两个字段加到model
里面去,好像不方便进行setData
,读者可以自己试试。需要说明的是,
triggerEvent
方法里需要添加选项设置:this.triggerEvent('tapitem', { nid: nid }, { bubbles: true, composed: true })
不然调用组件的节点接收不到递归里面的事件触发。
// pages/components/mytree/mytree.js
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.itemid;
console.log('组件里点击的id: ' + itemid);
this.triggerEvent('tapitem', { itemid: itemid }, { bubbles: true, composed: true });
}
}, ready: function(e) {
this.setData({
isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length),
});
console.log(this.data);
},
})
最后看看使用组件,直接把index.html
清空用来测试,相关的几个文件代码如下:
<!--index.wxml-->
<view>
<view class='up'>--------------</view>
<mytree model='{{ treeData }}' bind:tapitem='tapItem'></mytree>
<view class='down'>--------------</view>
</view>
index.json
如下:
{
"usingComponents": {
"mytree": "../components/mytree/mytree"
}
}
index.js
如下,记得把前文的treeData
贴上:
Page({
data: {
treeData: treeData,
},
//事件处理函数
tapItem: function (e) {
console.log('index接收到的itemid: ' + e.detail.itemid);
}, onLoad: function () { },
})
转载:https://www.jianshu.com/p/dabca0161993
微信小程序实现简单的树形图treeview的更多相关文章
- 微信小程序支付简单小结与梳理
前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...
- [转]微信小程序支付简单小结与梳理
本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...
- 微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...
- 微信小程序实现简单的2048
这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...
- 微信小程序之简单记账本开发记录(七)
记账本已经可以实现添加和删除的功能 现在只需要将上述步骤重复一遍便可将另一个界面做出来. 大体上已制作完成,如果在细节上有变动会在这一篇更新 总体来说,这个作业让我对微信小程序的开发有了更多地认识,大 ...
- 微信小程序之简单记账本开发记录(一)
下载并安装微信开发者工具 在选择开发记账本程序的时候犹豫着选择android studio还是微信小程序 最后选择了微信小程序,因其便利和快捷. 话不多说,第一步,下载并安装微信开发者工具.下面是教程 ...
- 微信小程序之简单记账本开发记录(二)
1.打开开发者工具 2.从微信公众平台上获取到appid,或者使用测试号. 项目的大致目录如下: 一个小程序主体部分由三个文件组成,必须放在项目的根目录中 以app为开头的文件名用来布置作用于整个项目 ...
- 微信小程序一些简单的快捷键
常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选 ...
- 微信小程序 table 简单测试
<view class='AutoTable'> <view id='AutoTableItem'> <block wx:for="{{array}}" ...
随机推荐
- Android摸索一环境搭建
用户场景:做语音保全,首先要拨打400号码,听到语音后需要先按1然后再拨打对方号码,那么问题就来了,如果我记不清楚对方号码!是不是很苦逼----我要先找到对方号码然后用笔或者其他方式把这个号码记录下来 ...
- db first和code first
1. db first 是现有数据库,再写代码.根据数据库的表生成类. django里面:python manage.py inspectdb 2. code first 是先写代码,后创建数据库. ...
- [No0000F5]C# 类(Class)
当你定义一个类时,你定义了一个数据类型的蓝图.这实际上并没有定义任何的数据,但它定义了类的名称意味着什么,也就是说,类的对象由什么组成及在这个对象上可执行什么操作.对象是类的实例.构成类的方法和变量成 ...
- [No0000ED]IPSec策略之管理
IP安全策略 @echo off :again set num= set ippolicyname= set ismmpfs= set keytime= set keyexpress= set new ...
- Ollydbg
1.用来查看dll文件的信息,取代现在使用的exescope;
- Linux 下安装JDK和jmeter 及环境配置记录过程
一.安装首先要查看linux系统的位数,用命令getconf LONG_BIT,我的是centOS 32位 二.官网下载32位的JDK8 http://www.oracle.com/technetwo ...
- falsk_蓝图(blueprint)
蓝图(blueprint) 随着业务代码的增加,将所有代码都放在单个程序文件中,是非常不合适的.这不仅会让代码阅读变得困难,而且会给后期维护带来麻烦. 什么是蓝图 蓝图:用于实现单个应用的视图.模板. ...
- linux测试环境维护之磁盘空间维护
常见需要定期清理的日志有: 清理oracle监听日志: 1.进入/opt/oracle/db/diag/tnslsnr/sels-186/listener/alert目录下, 执行命令: rm -rf ...
- 关于话题模型(topic model)的一些思考
最近在分析知乎的‘问题’文本所属的话题,用python提取,实现了LSTM和LDA模型在这个方面的应用,但是效果不是很理想,一个是这些文本属于短文本,另外用来分析的文本本身包含多个领域的问题,并且数量 ...
- js:return [ expression ],return false,return true,return的区别
1.return [ expression ] return返回值实际上是对window.event.returnvalue进行设置. 2.return false,阻止默认的行为, ① 当给a标签绑 ...