这是昨晚加班的时候,用微信小程序写的一个treeview组件。

先来看看效果图吧!

比较简单吧,直接view布局。

移动端实现treeview类似的效果,有大的局限性。首先受设备宽度的影响,如果像PC端那样,显得那么有层次感,在移动设备上,有可能很丑的。这里,有一条线,将同一节点通过一条竖线连接起来,这样,不会因为层次问题,导致内容换行。

<!--pages/demo/demo.wxml-->
<import src="/templates/chapter.wxml" />
<view class='tree'>
<block wx:for="{{chapters}}" wx:key="item">
<!---list-item beign-->
<template is='node' data='{{node:item,expend:item.expend}}' />
<!---list-item end-->
<template is='nodes' data='{{nodes:item.children,expend:item.expend}}' />
</block>
</view>
<!--底部声明 begin-->
<view class="page__bd page__bd_spacing">
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">习刷刷</navigator>
</view>
<view class="weui-footer__text">Copyright © 2018-2032 www.xsstk.com</view>
</view>
</view>
<!--底部声明 end-->

其中引用了一个模板(chapter)。

js中声明了几个方法。

//节点点击事件
nodeClick: function(e) {
var list = this.data.chapters;
var that = this;
this.setTreeValue(e.currentTarget.dataset.id, list, function(t) {
t.expend = !t.expend;
//如果关闭节点,则递归调用
if (t.expend === false) {
that.closeNode(t);
}
});
this.setData({
chapters: list
}); //刷新数据
},
//设置节点值
setTreeValue: function(id, list, callback) {
var that = this;
for (var i in list) {
var node = list[i];
if (node.id === id) {
callback && callback(node);
return;
} //跳出循环
node.children && that.setTreeValue(id, node.children, callback); //递归循环
}
},
//关闭节点
closeNode: function(node) {
var that = this;
node.expend = false;
node.children && node.children.forEach(function(t, i) {
that.closeNode(t); //递归关闭节点
});
}

微信小程序treeview的更多相关文章

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

    H5有很多树形图(树状图)的组件,echarts也有.比如像bootstrap的treeview,定制性很强.不过这些都无法方便地为小程序所用,除非整个页面用H5搭建再用webview框进去,有点粗暴 ...

  2. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  3. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  4. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  5. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  6. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  7. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  8. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

  9. 微信小程序前端源码逻辑和工作流

    看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...

随机推荐

  1. 微信小程序——微信卡券的领取和查看

    这里大致介绍下微信卡券的一些常见问题,不再介绍具体技术了,相关接口详见微信卡券. 1. 会员卡跟卡券一样么? 这个是一样的,至少在前端是一样处理的,最多也就是卡券设置展示不同.对于微信卡券领取和查看的 ...

  2. 73. Set Matrix Zeroes 把矩阵同一行列的元素都改成0

    [抄题]: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place. ...

  3. 带标签的循环语句、switch

    今天继续更新,控制流程的剩余部分内容,带标签的循环语句中的continue/break 的使用方法,以及switch关键字的使用方法.例1:带标签的continue/break.package com ...

  4. windows下 zookeeper

    1.zookeeper的安装和配置 下载:http://zookeeper.apache.org/releases.html 把conf目录下的zoo_sample.cfg改名成zoo.cfg,这里我 ...

  5. 3T - A1 = ?

    有如下方程:A i = (A i-1 + A i+1)/2 - C i (i = 1, 2, 3, .... n). 若给出A 0, A n+1, 和 C 1, C 2, .....C n. 请编程计 ...

  6. linux kernel notifier chain(事件通知链)

    Linux内核中各个子系统相互依赖,当其中某个子系统状态发生改变时,就必须使用一定的机制告知使用其服务的其他子系统,以便其他子系统采取相应的措施.为满足这样的需求,内核实现了事件通知链机制(notif ...

  7. [杂谈]杂谈章2 eclipse没有(添加)“Dynamic Web Project”

    原因:你安装的是专门开发java项目的,而Dynamic Web Project  属于J2EE技术 第一种方法: 你要专门下载一个集成了J2EE插件的Eclipse,到eclipse官网下载相对应版 ...

  8. MD5=======RBAC权限管理

    经过网上查阅相关的说明原来,MD5全名Message-Digest Algorithm 5(信息-摘要算法)是一种不可逆的加密算法. MD5为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性 ...

  9. sass基础常用指南

    一.变量 $global-color:red; .nav{ background:$global-color; } 二.sass命名时横杠和下划线不区分 $global-color:yellow; . ...

  10. w7 全网架构-rsync-备份

    准备 1.从安装系统开始准备 安装过程中添加网卡 eth0 ip 10.0.0.210 netmask 24 gateway 10.0.0.254 eth1 ip 172.16.1.210 netma ...