当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序模拟下拉菜单开发实例

微信小程序模拟下拉菜单开发实例

2018-12-05 16:09 来源: 霸界科技

摘要:微信小程序自从2018年元旦微信的第一次改版,已经可以直接从微信主页下拉框进入列表,进入使用过的小程序了,那么实现这种微信小程序下拉框的组件是如何开发的呢?接下来,跟大...

期权保本理财
  微信小程序自从2018年元旦微信的第一次改版,已经可以直接从微信主页下拉框进入列表,进入使用过的小程序了,那么实现这种微信小程序下拉框的组件是如何开发的呢?接下来,跟大家分享一个微信小程序模拟下拉菜单开发实例。
 
微信小程序模拟下拉菜单开发实例
 
  微信小程序模拟下拉菜单开发必须掌握微信小程序下拉菜单思路与步骤。布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。使用dt做出第一级菜单,使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层。查看效果,接下来实现点击事件。dt绑定点击事件tapMainMenu,flag控制显隐toggle,提供2个class,hidden与show,来控制显隐。注:dt也是可以bindTap的,不单是view。关闭所有一级菜单,每个一级菜单都有一个index标识,由tapMainMenu事件传递过去,与数组subMenuDisplay一一对应,当前元素subMenuDisplay[index]视原来状态决定是显示或隐藏。选中二级菜单当前项,但给个系统icon及改变背景色,文本加粗,同样改变一级菜单标题,demo中给出一个弹窗。加highlight效果,与一级菜单不同,使用二维数组的方式实现点击高亮,这样才能定位到是某一级的某二级菜单,再决定显示隐藏。这样就实现了高亮与取消高亮。但还没完,与一级菜单不同,这里与兄弟子菜单是非互斥的,也就是说点击了本菜单,是不能一刀切掉兄弟菜单的高亮状态的。于是我们改进js代码。声明方式,改用变量形式,方便存储。
 
  针对有待完善的功能点而言,显示与隐藏带动画下拉;抽象化,使用回调函数,将监听每个二级菜单的点击;数据源与显示应当是分离的,一级与二级菜单的key value应该是独立在外,系统只认index,然后对相应点击作处理,跳转页面,筛选结果等。
 
  微信小程序成为当下热门话题,下面从多个方面来谈谈制作微信小程序下拉框组件实例,微信小程序下拉框开发文档。随着小程序的热度不减,更多的电商大佬来时使用小程序,现在,付出宝现已建立起2万开发者、1.2亿用户日活的小程序生态。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088