微信小程序实现简单的树形图treeview

H5有很多树形图（树状图）的组件，echarts也有。比如像bootstrap的treeview，定制性很强。不过这些都无法方便地为小程序所用，除非整个页面用H5搭建再用webview框进去，有点粗暴。所以还是自己写一个简单的树形图组件试试。最终效果如下：

新建一个微信小程序项目，在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相关推荐

【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序：简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码内包含了N种模板制作,另外并有大分类另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner 激励视频视频广告多格子广告横 ...
微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件效果图 index.wxml文件 <canvas type="2d" id="can ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
微信小程序设置简单的监听器（转载）
微信小程序设置简单的监听器创建一个watch.js文件 /*** 设置监听器 watch.js*/ export function setWatcher(page) {let data = page ...
微信小程序超级占内存_6款宝藏微信小程序，简单又实用，节约内存就靠它了...
目前手机对生活的影响越来越重要,各种APP在生活中扮演着极其重要的角色.但是随着APP功能的增多,所占内存也是越来越大,很多手机都在超负荷运行,这样对手机的使用寿命会大大折损.最开始了解微信小程序是里 ...

微信小程序实现简单的树形图treeview

微信小程序实现简单的树形图treeview相关推荐

最新文章

热门文章