微信小程序：“我的”页面布局（二）：可配置功能菜单列表

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

tips：

1小程序底部菜单标签个数不少于2个，最多不超过5个。

2可以在 阿里巴巴矢量图标库 找到你需要的图标。

3小程序建议图标大小为8181px

我这边选择的是64尺寸的png，每一个图标选择两种颜色，分别对应未选中状态和选中状态，具体按照你们设计项目进行

tips：

1建立项目文件夹：images

2在pages中建立相对应的菜单栏目文件夹

3配置appjson： tabBar配置

1appjson中，"window":{}和"tabBar":{}是同级

2 全局配置

3 设置tabbar地址:wxsetTabBarBadge(Object object)

解题思路

1左右的结构(scroll-view)

2左侧点击的时候，要跟右侧的id对应上

3右侧上下滑动的时候，左侧的id要对应上

(右侧滑动时会产生滚动高度--scrollTop(st))

如：人气Top的高度有500 --- st>=0 && st<500

大师咖啡的高度有300 --- st>=500 && st<800

小鹿茶精选的高度有270 --- st>=800 && st<=1070

获取每个区块的高度 push到数组中[ 0 , 500 , 800 , 1070]

arr[i] < st < arr[i+1]

效果展示

通过使用循环容器的设置值激活第一项，同时配置点击激活某一项，实现点击菜单，展示不同的商品内容功能。

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表。

点击数据中心。

创建数据表：商品分类。

字段包含：分类名称。

点击数据中心。

创建数据表：商品。

字段包含：商品名称、商品、商品分类。

其中商品分类字段单表关联商品分类表。

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑，数据表与界面元素组件通过事件连接。

点击事件中心。

创建查询事件：查询分类。

添加一个成功的响应接口。

点击事件中心。

创建事件：查询商品。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器：设置值，默认第一项是激活项。

选中流式布局列表。

点击检查面板中的触发器面板。

创建触发器：获取商品。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器：获取商品。

选中循环容器的列表条目。

点击检查面板中的触发器面板。

创建触发器：激活。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器：查询商品分类。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器：取消激活。

选中循环容器的列表条目上的标签文本。

点击检查面板中的触发器面板。

创建触发器：切换菜单。

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

选中流式布局组件的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。

做成效果 ：

此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。

此文件编写的组件会作为自定义的tabBar展示出来

以上就是关于微信小程序：“我的”页面布局（二）：可配置功能菜单列表全部的内容，包括:微信小程序：“我的”页面布局（二）：可配置功能菜单列表、微信小程序01：底部菜单(tabBar)、微信小程序 --- 菜单(menu)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！