0755-23698839
132-6576-8769

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

创络讲堂 2021-01-04 16:45:01 115次 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里面搜索“创络科技网站建设”,打开小程序真实体验。这个小程序是标准版网站的原生开发的,里面的数据均为演示,展示效果为主。

无限级伸缩可折叠菜单

  • 新增页面同时推送到百度智能小程序和百度搜索
    2021-01-12 14:35:26
    网站新增页面同时推送到百度智能小程序和百度搜索,可以帮助网站和小程序的资源尽快被抓取和收录,降低网站新生产的内容被其他人复制的利好,可以变相保护网站内容。
  • 智能小程序rich-text中不支持video视频组件的解决方案
    2020-12-25 14:18:08
    网站的数据同步到小程序后,可能或多或少会有一些问题,例如网站文章的正文中有video视频组件,而本文将介绍智能小程序的rich-text中又不支持video视频组件的解决方案。
  • 公众号开发和小程序开发的必要性
    2019-12-13 08:49:57
    微信公众号和小程序目前来说对企业的运营起着很大的辅助作用,特别是对于一些有电商业务的公司,公众号开发和小程序开发很有必要。
  • 百度小程序新资源提交接口开发初体验
    2019-11-13 14:30:36
    由于经常长时间的把精力放在开发客户的项目上去了,再加上小程序客户数量不多,所以,我们一直没有特别留意百度小程序的资源提交这个接口。以前的MIP、熊掌号出来的时候,都是第一时间接入了推送接口的,直到今天看到通知说即将启动小程序鱼跃计划。
  • 小程序和微信公众号的开发有什么区别需要注意
    2018-07-24 17:13:16
    对于大多数项目来说,小程序的开发和微信公众号的开发基本是一致的,但是针对一些特别的项目则有很多细节不同,例如:支付、站外资源等。
  • 可以将手机版网站放入微信小程序吗?
    2018-03-28 15:03:11
    可以!现在已经有越来越多的企业网站适配了手机版网站,而当下比较热门的小程序也非常吃香,重新开发小程序毕竟成本偏高,于是我们推荐大家直接快速的将手机版网站放入微信小程序。
标准建站流程
客服电话
  • 132-6576-8769
  • 0755-23698839