微信小程序原生写法实现树型选择组件，完整代码。

已于 2024-11-21 11:32:36 修改
阅读量2.3k 收藏 6
点赞数 3
分类专栏： 前端 文章标签： 微信小程序 小程序 typescript
于 2023-08-18 17:45:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jnsone/article/details/131460381
版权

最近在做小程序项目,用的微信原生写法,业务用到了树型选择器,在网上找了一些weui,vantui都没有类似的组件,就自己手写了一个。

  1. 首先想到的肯定递归组件，我们现先创建一个组件.设置好图标,随便找一些图片都可以,这里我用了vantui中的图标.组件建议写在专门的组件文件夹下。
<!-- 树形组件 tree.wxml -->
<view>
	<view style="padding-left:25rpx;">
		<view wx:for="{{ treeList }}" wx:for-item="item" wx:key="id">
			<view class="tree-item">
				<view bind:tap="showChildren" data-id="{{ item.id }}" data-parentid="{{ item.parentId }}" class="tree-label">
					<van-icon custom-style="{{ item.collapse?'transform:rotate(90deg)':'transform:rotate(0deg)' }}" name="play" wx:if="{{ item.children }}" />
					<view class="{{ item.selected? 'current':'general' }}">{{item.name}}</view>
				</view>
				<van-icon
					bind:tap="handleClick"
					data-currentitem="{{ item }}"
					wx:if="{{ !item.children && item.selected }}"
					style="border-color: #1989fa;"
					size="20px"
					color="#1989fa"
					name="checked"
				/>
				<van-icon
					bind:tap="handleClick"
					data-currentitem="{{ item }}"
					wx:if="{{ !item.children && !item.selected }}"
					size="20px"
					name="circle"
					color="#c8c9cc"
				/>
			</view>
			<!-- 递归组件 -->
			<block wx:if="{{ item.children && item.collapse }}">
				<tree treeList="{{ item.children }}" treeListTemp="{{ treeListTemp }}" currentItem="{{ currentItem }}"></tree>
			</block>
		</view>
	</view>
</view>

在组件的json文件中声明组件，“component”: true，调用自己。

{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "tree": "../tree/tree"
  }
}

这是组件里的样式，主要区分选中状态的样式，这里大家可以再优化下。

/*tree.wxss*/
view{
  font-size: 16px;
  font-family:  PingFangSC-Regular;
}

.tree-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tree-label{
  padding-right: 15rpx;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.current{
  color: #1989fa;
}

.general{
  color: #1c2438;
}

然后是数据处理，设置选中状态及折叠状态，这里可以将选中的值冒泡给调用处去处理。下面的组件中的方法，我对每个方法都作了详细的说明。

// tree.ts
//树形单选组件
Component({
  properties: {
    treeList: Array, // 树形数组
    treeListTemp: Array,
    currentItem: Object
  },
  data: {},
  methods: {

    /**
     * 点击标签展示子节点
     * @param e 
     */
    showChildren: function (e: any) {
      //点击项的id
      let id = e.currentTarget.dataset.id;
      // 父级id
      let parentid = e.currentTarget.dataset.parentid;
      this.findCurrentItem(id, this.data.treeList);
      if (parentid == null) {
        this.setData({
          treeListTemp: this.data.treeList
        })
      } else {
        this.hanleStatusChange(this.data.treeListTemp, parentid);
        this.setData({
          treeListTemp: this.data.treeListTemp
        })
      }
      this.triggerEvent("resetTree", { changeList: this.data.treeListTemp }, { bubbles: true, composed: true });
    },

    /**
     * 设置折叠状态
     * @param list 处理集合
     * @param parentid 父级id
     */
    hanleStatusChange: function (list: AnyArray, parentid: Number) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id == parentid) {
          list[i].children = this.data.treeList;
          break;
        } else {
          if (list[i].children) {
            this.hanleStatusChange(list[i].children, parentid);
          }
        }
      }
    },

    /**
     * 功能类型 collapse：点击标签展开收起
     * */
    findCurrentItem: function (id: Number, list: AnyArray) {
      list.forEach(it => {
        if (it.id == id) {
          it.collapse = !it.collapse;
        } else {
          if (it.children) {
            this.findCurrentItem(id, it.children);
          }
        }
      })
    },

    /**
     * 点击选择框
     * @param e 节点
     */
    handleClick: function (e: any) {
      let checkedItem = e.currentTarget.dataset.currentitem;
      console.log('选中项', e.currentTarget.dataset.currentitem);
      this.setChooseStatus(checkedItem.id, this.data.treeListTemp);
      checkedItem.selected = !checkedItem.selected;
      this.setData({
        treeListTemp: this.data.treeListTemp
      })
      this.triggerEvent("resetTree", { changeList: this.data.treeListTemp, checkedItem: checkedItem }, { bubbles: true, composed: true });
    },

    /**
     * 设置选中状态
     * @param id 选中项的id
     */
    setChooseStatus(id: Number, list: AnyArray) {
      list.forEach(el => {
        if (el.id == id) {
          el.selected = !el.selected;
        } else {
          el.selected = false;
          if (el.children) {
            this.setChooseStatus(id, el.children);
          }
        }
      });
    },
  },
})
  1. 下面开始使用组件，在你页面引入这个树型组件，你可以使用一个容器控制显示与隐藏，这里我用的vantui中的popup弹出层组件。将你的树型数组传入组件，写一个监听事件，监听自组件的选中事件。
<!--index.wxml-->
<view class="container">
	<view class="content">{{context}}</view>
	<view class="btn">
		<van-button bind:click="openPicker" type="primary" block>选择地区</van-button>
	</view>
</view>
<van-popup show="{{ picker }}" close-on-click-overlay position="bottom" lock-scroll="{{ true }}" bind:click-overlay="closePicker">
	<van-cell class="toolbar">
		<view class="title-group">
			<view bindtap="closePicker" class="cancel">取消</view>
			<view class="picker-title">选择地区</view>
			<view bindtap="confirm" class="confirm">确认</view>
		</view>
	</van-cell>
	<view class="tree-style">
		<custom-tree treeList="{{ list }}" treeListTemp="{{ list }}" bind:resetTree="resetTree" />
	</view>
</van-popup>

页面的js文件

// index.ts
//@ts-nocheck
Page({
  data: {
    picker: false,
    context: '',
    list: [
      {
        id: '9',
        parentId: null,
        name: '上海市',
        collapse: false,
        selected: false,
        children: [
          {
            id: '91',
            parentId: '9',
            name: '静安区',
            collapse: false,
            selected: false,
          },
          {
            id: '92',
            parentId: '9',
            name: '静安区',
            collapse: false,
            selected: false,
          }
        ]
      },
      {
        id: '1',
        parentId: null,
        name: '江苏省',
        collapse: false,
        selected: false,
        children: [
          {
            id: '11',
            parentId: '1',
            name: '南京市',
            collapse: false,
            selected: false,
            children: [
              {
                id: '111',
                parentId: '11',
                name: '玄武区',
                collapse: false,
                selected: false,
              }
            ]
          }
        ]
      },
      {
        id: '2',
        parentId: null,
        name: '浙江省',
        collapse: false,
        selected: false,
        children: [
          {
            id: '21',
            parentId: '2',
            name: '金华市',
            collapse: false,
            selected: false,
            children: [
              {
                id: '211',
                parentId: '21',
                name: '婺城区',
                collapse: false,
                selected: false,
              }
            ]
          }
        ]
      }
    ],
    currentCheck: {},         //当前选中项
  },

  /**
   * 打开选择窗
   */
  openPicker() {
    this.setData({
      picker: true
    })
  },

  closePicker() {
    this.setData({
      picker: false
    })
  },

  confirm() {
    let { name } = this.data.currentCheck;
    this.setData({
      context: name,
      picker: false
    })
  },

  /**
   * 监听事件，自组件选中时会触发，重置整棵树
   */
  resetTree: function (e: any) {
    this.setData({
      currentCheck: e.detail.checkedItem,
      list: e.detail.changeList
    })
  },

  onLoad() { },

})

至此就完成了，如果有什么问题，欢迎在评论区留言或者私信我，完整代码已经传到了gitee https://gitee.com/jadecn/custom-tree上，也欢迎大家提Issue。

微信小程序组件 —— 树形下拉框
kitty_ELF的博客
07-28 5718
因为项目需求，需要一个树形下拉选择框，参考了网上的树形结构整理出了这样一个效果图 其实主要还是参考了treeview的递归思想 微信小程序实现简单的树形图treeview 绘制出下拉框内的内容，在加个状态判断展开隐藏下拉框，方法回调显示选择值 其实思想还是很容易的 接下来直接上代码 1.首先新建树形菜单组件 —— mytree (1) mytree.wxml <view class="container"> <view style="padding:5rpx 0;">
微信小程序自定义tree组件，拿走直接用
weixin_43889687的博客
07-13 2082
工作原因，微信小程序需要一个功能类似于elemenui中的tree组件，找了好多ui组件库没有能直接用的，最后自己写了一套，封装成组件，中心技术是组件本身递归，只需要在父级页面传“树列表数据”和“选中的节点id”就可以用了。以下是tree组件需要的icon图标，自己去矢量库下载就好。
微信小程序 树形菜单组件_v2
07-20
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></wxTreeList>
ElementUI下拉树型选择器组件
最新发布
qq_59392212的博客
01-14 779
重新封装ElementUI的select组件，显示树型结构选项，实现子级多选。
原生小程序-树形多选treeCheckbox
apppws的博客
07-28 1179
【代码】原生小程序-树形多选treeCheckbox。
微信小程序树形选择组件
qq_34907249的博客
10-12 3560
treeListIndex: {// 默认为0，当前循环的第几层，用于tree样式展示。* @t 功能类型 collapse：点击图标展开收起，title:点击标题事件。text:"2-三级-1"text:"二级-1",text:"二级-2",前言：微信小程序并没有提供这样的组件 ，vant也没有，就自己写了一个。// 在组件实例被从页面节点树移除时执行。text:'一级',2、父子间事件通信 （需要层层向上传递）
微信小程序实现简单的树形选择控件------treeSelect
热门推荐
L_wj的博客
12-25 1万+
assd
微信小程序 tree树形组件的实现
qq_40060547的博客
12-27 9808
前言 最近公司的小程序来了一个需求，需要实现一个树形结构的展示。pc端的tree组件可谓百家争鸣，拿来即用的组件很多，奈何在网上检索一番，并未发现小程序端有适合的tree组件，于是便开始了尝试，自己写一个简单的tree组件。（末尾附完整代码） 先看效果 开始 首先项目结构如图 模拟一下树形结构数据 index/index.js data: { dataTree: [ { id: 1, name: '一级A', children: [
微信小程序 树形菜单组件
01-30
微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <block wx:for="{{listData}}" wx:key="index"><treeList listData="{{item}}" step="1" ></treeList></block>
微信小程序写一个树型组件
ZerZhang的博客
08-25 1357
微信小程序树形结构(组件)
微信小程序树形菜单替代组件:路径视图path-view
01-27
path-view-component 微信小程序 树形菜单替代组件：路径视图 path-view 项目截图 路径视图动态效果图-路径模式：mode1: 路径视图动态效果图-路径模式：mode2: 更新说明 2018-08-13 修复value以及unnormalizedValue更新时视图无法同步更新的bug。~~更详细的说明留待后续补充。。~~说明已在下方补充 2018-08-21 新增了contentKey，设置 每级内容显示内容对应的键值，之前只能是 item.title，现在可以根据需要设置。 2018-09-20 新增位置保持功能 API 参数 说明 类型 可选值 默认值 value     要显示的树状数据 Array Y [] pathMode     路径模式，支持：'mode1'、'mode2'。'mode1'模式，点击路径跳转时视图显示对应标签下一级的内容,'mode
微信小程序树形组件微信小程序树形组件
06-21
微信小程序树形组件微信小程序树形组件
TreeCRTL 树状控件的小程序
08-23
vc TreeCRTL 树状控件各种操作的小程序
小程序公司部门选人组件 树状多选实现
12-29
小程序公司部门选人组件 树状多选实现
微信小程序实现菜单左右联动
10-15
微信小程序实现菜单左右联动是目前小程序开发中的一个常见需求，它允许用户在左侧选择一个菜单项后，右侧内容能够根据左侧的选择进行相应的改变。这种交互方式在很多应用中都有用到，比如在设置界面、表单填写、信息...
微信小程序tree下拉复选组件（带源码）
usernotdefined的博客
11-18 5771
效果 鸣谢 感谢这位大佬的思路 难点 如何根据层级缩进，这里是根据index tree组件是自调用（递归） 由于组件是递归渲染，导致平级非点击项数据为原始状态，这里把修改的状态放在map结构里。所以需要把collapse状态、checked状态记录在map结构里，每次折叠、点击操作需要根据map结构进行修正。 checked：0未选中，1选中，-1有选中但未全选 collapse: true折叠，false展开 组件是递归调用的，所以不要在递归中频繁的setData最好是return一个值,最后在set
微信小程序树结构选择组件（优化源码）
weixin_49875932的博客
02-15 3565
微信小程序树结构选择组件
探索微信小程序的树形菜单新选择：Path-View 组件
gitblog_00316的博客
09-13 808
探索微信小程序的树形菜单新选择：Path-View 组件 项目地址:https://gitcode.com/gh_mirrors/pa/path-view-component 项目介绍 在微信小程序开发中，树形菜单组件是许多应用不可或缺的一部分，尤其是在需要展示层级结构数据的场景中。传统的树形菜单组件虽然功能强大，但在某些特定需求下可能显得不够灵活。为了解决这一问题，path-view-compo...
微信 html tree,微信小程序Tree自定义控件实现
weixin_34404528的博客
06-07 648
在微信小程序中实现Tree控件之前在网上搜索了关于微信小程序tree控件的实现，但是发现居然没有人去做tree控件，因此本人下定决心凭借自己一个多月的自学能力给大家分享一下自己的小成果。第一步：创建tree自定义控件**1.创建js文件treebar.js**//获取应用实例const app = getApp()Component({/*** 组件的属性列表*/properties: {serv...
微信小程序树形结构代码
06-09
以下是一个简单的微信小程序树形结构代码示例： wxml部分： ``` <template name="node" data="{{node}}"> <view class="node"> <view class="node-title">{{node.title}}</view> <view class="node-content">{{node.content}}</view> <block wx:if="{{node.children}}"> <view class="node-children"> <template wx:for="{{node.children}}" wx:for-item="child"> <template is="node" data="{{node:child}}"></template> </template> </view> </block> </view> </template> <template is="node" data="{{node:tree}}"></template> ``` js部分： ``` Page({ data: { tree: { title: 'Root', content: 'This is the root node', children: [ { title: 'Node 1', content: 'This is node 1', children: [ { title: 'Node 1.1', content: 'This is node 1.1' }, { title: 'Node 1.2', content: 'This is node 1.2' } ] }, { title: 'Node 2', content: 'This is node 2' } ] } } }) ``` 这个示例定义了一个名为 "node" 的模板，可以使用它来递归渲染树形结构。在Page的data中定义了一个名为 "tree" 的树形对象，包含了一个根节点和若干子节点。最后，在wxml中使用模板，将 "tree" 对象传递给 "node" 模板即可渲染出整个树形结构。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值