更新记录
1.1.2(2024-04-02) 下载此版本
更新组件demo
1.1.1(2024-04-02) 下载此版本
完善文档说明
1.1.0(2024-04-02) 下载此版本
增加加载下一级的loading 动画效果,晚上readme 的文档
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
network-tree
简介
一个很简单的无限向下展开的tree 结构,主要业务应用于(直销)上下级人员关系展示,只有展开收起功能 ,支持动态加载数据。 (只测试了 H5 和微信小程序 ,代码比较简单 ,应该通用所有平台是用的时候 自行修改代码按业务需要调整即可)
数据类型 简介
interface ITreeItem {
id : string // 必有参数
name : string //
card_id : string
head_image : string
star : number
level : number
has_next : boolean // 必有参数 需要用来判断是否有下一级
is_loading?:boolean // 逻辑追加信息 用来控制下一级加载的显示
is_expanded ?: number // 逻辑追加信息 用来判断是否显示展开和关闭按钮 无需维护
children : ITreeItem[] | [] // 下一级容器
}
参数 | 说明 |
---|---|
treeList | 如上 ITreeItem[] |
使用demo
const treeList = ref([{
id: '1',
name: 'zhangsan1',
card_id: '2342342445',
head_image: 'https://img1.baidu.com/it/u=2876200066,1063313120&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
star: 1,
level: 2,
has_next: true,
children: [{
id: '11',
name: 'li1',
card_id: '1111111',
head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
star: 1,
level: 2,
has_next: false,
children: []
},
{
id: '112',
name: 'li2',
card_id: '1111112',
head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
star: 1,
level: 2,
has_next: true,
children: []
}
]
}, {
id: '2',
name: 'zhangsan2',
card_id: '2342342445',
head_image: 'https://img1.baidu.com/it/u=2876200066,1063313120&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
star: 1,
level: 2,
has_next: true,
children: [{
id: '22',
name: 'zhangsan22',
card_id: '23423423',
head_image: 'https://img0.baidu.com/it/u=4012307479,1652345218&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
star: 1,
level: 2,
has_next: false,
children: []
}]
}])
<!-- 模板 -->
<network-tree :treeList="treeList"></network-tree>
动态加载说明
- 因为子组件的递归自身操作,需要用provide 进行子组件 方法传递
- onLoadNext 最好是用 async 同步方式
//父组件 provide('onLoadNext', onLoadNext)