您当前的位置: 首页 > 知识百科 > 微信小程序开发二级菜单如何实现?

微信小程序开发二级菜单如何实现?

时间:2023-07-01 14:05 阅读数:19 人阅读 分类:知识百科

  大家用过微信小程序的朋友应该知道,在这些小程序里面,往往有几层菜单,今天小编要给大家介绍的就是小程序的二级菜单是如何开发的,今天小编不以枯燥的理论来讲给大家听,小编以一个实例来给大家看看,看完之后应该就能知道如何去开发二级菜单了吧!

  微信小程序-估价系统-车辆品牌款式等-三级菜单

  车标

  省份-城市-二级菜单

  (二三级菜单首先考虑使用微信小程序的数据缓存,但在不刷新的情况下缓存数据永远是上一次保存的。

  今天更新了微信小程序开发工具版本,发现写了数据缓存的代码之后后面的跳转语句不能执行无法跳转。

  打算放弃数据缓存的方式,想到另一种是在数组中加上跳转的目标地址然后直接跳过去,这样的弊端在于需要加上许多的页面比如一个省下的城市页面几十个省要几十个页面,忽然灵光一闪,考虑是否可以跳转中携带数据?马上进行尝试。

  !!!!我的天,我之前看官方文档都是睡觉去了吗。。。navigateTo的url里是可以带参数的,我没看到!!!

  !!!!!!!!!!!!!就算没看到以前写过的js都是做梦去了吗!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  我成功了,喜极而泣。)

  最终代码:

  toCity:function(e){

  var index=e.currentTarget.dataset.hi;

  var arr=this.data.provinceList[index].city;

  wx.navigateTo({

  url:"../city/city?cityList="+arr

  })

  }

  跳转的时候url链接里把要传的数据加上就可以,我想传的数据是数组arr

  在跳转目标的js文件里用以下代码获得数据

  Page({

  onLoad:function(options){

  this.setData({

  cityList:options.cityList.split(",")

  })

  }

  })

  因为直接用options.cityList得到的是字符串我用split转换成了数组。完美有木有。/(ㄒoㄒ)/~~所以当初为什么没有仔细看官方文档

  效果图如上,点山东跳转到山东的城市。

  通过这个例子,微微风小编相信大家对于如何开发二级菜单的思路应该清楚了吧,当然不同的设计是有不同,但具体的思路是一样的,大家如果想要去开发二级菜单,那么就多多的去实际操练下吧,毕竟实践才能得出结果哦!

  相关阅读:

  微信小程序开发无法找到接入点怎么接解决?常见问题分析!

  小程序开发中如何更换样式?

  怎么知道小程序的开发者是谁?