微信 html tree,微信小程序 tree组件
1. 根目录下新建tree组件 /components/tree/tree.wxml.js.wxss.json
(1). tree.wxml
{{treeList.text}}
(2). tree.js
// components/tree/tree.js
Component({
/**
* 组件的属性列表
*/
properties: {
treeListIndex: {// 默认为0,当前循环的第几层,用于tree样式展示
type: Number,
value: 0
},
treeList: Object
},
/**
* 组件的初始数据
*/
data: {
collapse: true // 每个tree组件对应自己的collapse属性;(true:折叠/false:展开;)
},
/**
* 组件的方法列表
*/
methods: {
tapTreeItem: function(e) { // 点击项
var item = e.currentTarget.dataset.item;
if (item.nodes !== undefined) { // 其下有子节点,可折叠展开操作
this.setData({ // 折叠展开操作
collapse: !this.data.collapse,
})
} else { // 最终子节点
this.triggerEvent('treeTap', { item }); // 将当前的点击项的数据传递给父页面
}
},
treenodetap: function(e) { // 递归的最终子节点
var item = e.detail.item;
this.triggerEvent('treeTap', { item }); // 将当前的点击项的数据传递给父页面
}
}
})
(3). tree.wxss
/* components/tree/tree.wxss */
@import '/weui.wxss'; // 引入weui.wxss; 微信提供的组件库
.tree_container {
background:#fff;
border-bottom: 1rpx solid rgba(0,0,0,.1);
}
.nocollapse_icon { /*展开图片*/
transform: rotate(90deg);
}
.tree_text {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
(4). tree.json
{
"component": true,
"usingComponents": {
"tree": "/components/tree/tree"
}
}
2. page文件夹下新建页面detail /page/detail/detail.wxml/wxss/js/json
(1). detail.wxml
(2). detail.js
data: {
treeList: {
text: '第一单元',
id: 0,
nodes: [
{
text: '理财入门之基本经济指标与经济学原理',
id: 1,
nodes: [
{
text: '正确理解理财之理财就是理生活',
id: 2,
nodes: [
{
text: '现金规划管理(上)',
id: 3,
},
{
text: '现金规划管理 (下)',
id: 4,
},
]
},
{
text: 'Child 2',
id: 5,
}
]
},
{
text: 'Parent 2',
id: 6,
nodes: [
{
text: 'Child 1',
id: 7,
},
{
text: 'Child 2',
id: 8,
}
]
}
]
}
}
(3). detail.json
{
"navigationBarTitleText": "树组件",
"usingComponents": {
"tree": "/components/tree/tree"
}
}
3. 效果预览
微信 html tree,微信小程序 tree组件相关推荐
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
- 微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
- 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
- 微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
- 微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...
- 微信小程序|area组件使用的地址数据文件plus
area组件使用的地址数据文件 前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意 前言 实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...
最新文章
- 满屋研选获1亿元B轮融资,华创资本领投,五岳资本、金地集团、治平资本等跟投...
- python流程控制-实战案例手把手教你Python流程控制技巧
- 弹出键盘windowsoftinputmode属性设置值
- Codeforces Round #529 (Div. 3) E. Almost Regular Bracket Sequence (括号配对,前缀和)
- HCL打开显示当前系统用户怎么解决_Mac键盘突然停止响应怎么办?
- 深入学习 Intellij IDEA 调试技巧
- Java后端面试题总结一
- 笔记本电脑自带键盘禁用与恢复
- 电子招标是未来的招投标趋势
- Fedora9下codeblocks安装无法编译的问题
- 51单片机一些软件的使用
- linux蓝屏修复工具,Windows修复助手
- 【最新Unity3D—Particle System粒子系统】最新Unity2017.2018.2019.2020均适用且超详细
- Nvidia Agx Xavier平台nvp6324模块调试
- Java基本功一之JDK配置Java基本语法
- 【一起读源码】1. Java 中元组 Tuple
- Flutter仿美团应用开发笔记-首页 (1)
- python request.get
- 如何实现一个下载进度条/播放进度条
- 关于 Kubernetes 中通过 Kustomize 定制 Yaml资源文件的一些笔记