0755-23698839
132-6576-8769

百度智能小程序递归实现无限级伸缩可折叠菜单

创络讲堂 2021-01-04 16:45:01 1617次 https://www.chuangluo.com/news_622.html 作者:创络科技

对于部分产品结构非常复杂的客户来说,无限级伸缩可折叠菜单显得非常实用。百度智能小程序要实现理论上的无限级伸缩折叠菜单,除了小程序开发自定义递归组件外,还需要数据源本身支持或根据递归思路开发并转化为JSON,还需要通过样式表进行控制,最后根据用户的操作习惯,定制对应的展开和折叠JS特效。

小程序递归实现无限级伸缩可折叠菜单

我们在网上查了很多资料,可能有这方面的需求的客户很少,所以暂时没有找到更好的实现方案。于是创络通过前后端同事配合,开发完成了这个功能。接下来我们将实现思路分享给大家,希望对你有所帮助。

一、构造递归JSON数据源,以PHP为例,需要在数据库开发解决就要考虑无限级需求,即采用递归思想设计MySQL数据库。然后同样的,通过PHP递归读取数据并存进多维数组。如果后期需要精细化控制不同级别的样式,则可以通过自定义函数为每一个元素标注默认展开或折叠标记、层级深度标记、是否有下级元素、直接下级元素数量标记等,最终可以参考以下结构构造函数,但只是仅供参考,具体请根据您自己的需求构造JSON数据源。

构造递归JSON数据源

二、使用Component构造小程序递归组件。构造的方法不同的小程序品牌可能略微有一点差别,但是基本上都是一样的,具体使用方法可以参考文档自行构造,基本上都是在Component中使用servant来实现递归,此处不再赘述。

三、前端控制样式,样式控制代码和做网站的CSS几乎一致,唯一需要考虑的是虽然理论上是无限级,但是界面上几乎不可能,因此,建议默认控制最小级别的显示效果,然后再单独针对需要特别显示的级别进行样式控制。

四、JS控制展开或折叠,这里推荐搭配使用scroll-view组件来实现,具体请参考官方文档。

最后我们来看一下实现的动态效果,由于GIF图片略大,且部分小程序终端目前可能会不支持GIF图片,因此建议在电脑端查看动态效果。也可以手机百度APP里面搜索“创络科技网站建设”,打开小程序真实体验。这个小程序是标准版网站的原生开发的,里面的数据均为演示,展示效果为主。

无限级伸缩可折叠菜单

  • 百度智能小程序中s-for和s-if联合使用的方法
    2020-12-18 09:27:06
    在百度智能小程序的开发过程中,我们有可能会需要用到s-for和s-if联合使用,即在循环中进行条件判断,本文将简要介绍这两者配合的使用方法。
  • 公众号开发和小程序开发的必要性
    2019-12-13 08:49:57
    微信公众号和小程序目前来说对企业的运营起着很大的辅助作用,特别是对于一些有电商业务的公司,公众号开发和小程序开发很有必要。
  • 做好网站内容建设以提高百度小程序收录资源占比突破50%
    2019-12-09 17:04:06
    百度小程序收录资源要求页面质量较高,要提高百度小程序收录资源占比以突破50%,做好网站内容建设是经公明网络公司创络科技实践的有效方法。
  • 百度智能小程序开发名称及内容审核将更加严格
    2018-10-22 15:30:18
    光明区做网站的公司创络科技在9月份,百度智能小程序刚刚推出的时候,成为了第一批开发者并顺利上线了多个百度智能小程序,但是最近我们发现百度智能小程序开发名称及内容审核将更加严格。
  • 如何申请注册百度智能小程序
    2018-09-21 11:15:18
    最近百度动作十分频繁,之前还不能申请注册的百度智能小程序,最近就已经很迅速的开放入口了,经过简单的注册,可以很快通过初审,等信息审核通过后,就可以创建小程序了。
  • 小程序和微信公众号的开发有什么区别需要注意
    2018-07-24 17:13:16
    对于大多数项目来说,小程序的开发和微信公众号的开发基本是一致的,但是针对一些特别的项目则有很多细节不同,例如:支付、站外资源等。
标准建站流程
客服电话
  • 132-6576-8769
  • 0755-23698839