微信小程序实现树形菜单其实很简单

话不多说，上代码 ➡️

组件资源下载（想直接下载组件，可以点击下载）

创建一个名为 treeList 的组件

组件代码

treeList.wxml：

<view class="treeList c{{step}}"><view class="line" style="margin-left:{{(step-1)*40}}px;"></view><view class="title" style="margin-left:{{(step-1)*40}}px;"><view class="icon" wx:if="{{listData.children.length>0 && isShowChildren}}" catchtap="toggleShowChildren">-</view><view class="icon" wx:elif="{{listData.children.length<=0}}"><view class="dot"></view></view><view class="icon" wx:else catchtap="toggleShowChildren">+</view><view class="text" >{{listData.title}}</view></view><block wx:if="{{listData.children.length>0&&isShowChildren}}" wx:for="{{listData.children}}" wx:key="index"><treeList listData="{{item}}" step="{{step+1}}"bindtreeListEvent="treeListEvent"></treeList></block>
</view>

treeList.wxss：

.treeList {box-sizing: border-box;position: relative;font-size: 30rpx;margin: 20rpx 0;
}
.line {position: absolute;height: calc(100% - 30rpx) ;width: 0px;border-left: 2rpx dashed #999999;left: 20rpx;top: 46rpx;
}
treeList:last-of-type>.treeList>.line {display: none;
}
.title {display: flex;align-items: center;
}
.title .icon {height: 38rpx;width: 38rpx;line-height: 38rpx;text-align: center;margin-right: 10rpx;border: 2rpx solid #cccccc;color: #cccccc;
}
.title .icon .dot {width: 20rpx;height: 20rpx;background: #f0f0f0;margin: 9rpx 0 0 9rpx;border-radius: 50%;
}
.title text {margin-right: 6rpx;
}
.title text.iconfont {font-size: 42rpx;
}
.title text.icon-tianjia {margin-left: 6rpx;font-size: 36rpx;
}
.title .btn {padding: 8rpx 20rpx;border: 2rpx solid #555555;color: #555555;font-size: 24rpx;margin-left: 4rpx;border-radius: 8rpx;
}
.title .text {padding: 6rpx 10rpx;border-radius: 10rpx;text-align: center;box-sizing: border-box;
}

treeList.json：

{"component": true,"usingComponents": { "treeList":"/components/treeList/treeList" }
}

treeList.js：

Component({ properties: { listData:{ type:Array|Object, value:{} }, step:{ type:Number, value:1 }, }, data: { isShowChildren:true, }, methods: {  toggleShowChildren(){ this.setData({ isShowChildren:!this.data.isShowChildren }) }, } })

组件路径根据实际情况

需要使用树形菜单的页面引入组件

页面代码

json 引用组件

{"usingComponents": {"treeList":"/components/treeList/treeList"},"navigationBarTitleText": "标题"
}

wxml中使用组件：

<view class="list"><block wx:for="{{listData}}" wx:key="index"><treeList listData="{{item}}" step="1" ></treeList></block>
</view>

listData的数据格式如下：

listData:[{title:'A层级菜单1',children:[{title:'B层级菜单1',children:[],isBind:true},{title:'B层级菜单2',children:[{title:'C层级菜单1',children:[]}]}]},{title:'A层级菜单2',children:[]}],

展示效果

微信小程序实现树形菜单其实很简单相关推荐

微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下. 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第 ...
linux带头像通讯录软件,这款微信小程序，拯救空白了很久的通讯录头像！
原标题:这款微信小程序,拯救空白了很久的通讯录头像! 一直以来,智能手机用户都被一个不大不小的问题困惑着--无论 iOS 还是 Android 平台,手机通讯录早已经支持了自定义好友头像的功能.然而由 ...
微信小程序源码推荐这个很实用学习地址
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了因为这是一款检讨书生成小程序所以再也不用为了写检讨而烦恼了哦支持自定义字数下线,主题自定义支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
微信小程序 - 实现左右菜单联动功能
今天给大家分享一下如何实现微信小程序左右菜单栏联动效果(相关代码模块我已单独整理放到github上面了,欢迎前来start),具体过程如下: 效果图: github地址:https://githu ...
[微信小程序]下拉菜单
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 动画效果是使用CSS3 @keyframes 规则(使 div 元素匀速向下移动) <view ...
微信小程序的运营与装修，简单几步掌握
尽管如今越来越多商家都已经认识到小程序商城获客成本低,使用方便的优势. 作为商家的私域流量,如果小程序商城制作之后,没有真正运营起来是不会有流量的,也就无法给商家带来实实在在的收益.微信小程序的运营与 ...

微信小程序实现树形菜单其实很简单

组件代码

页面代码

展示效果

微信小程序实现树形菜单其实很简单相关推荐

最新文章

热门文章

微信小程序 实现 树形菜单其实很简单

组件代码

页面代码

展示效果

微信小程序 实现 树形菜单其实很简单相关推荐

最新文章

热门文章

微信小程序实现树形菜单其实很简单

微信小程序实现树形菜单其实很简单相关推荐