关于小程序tabbar不支持传参的处理办法

论坛 期权论坛 脚本     
匿名技术用户   2021-1-16 03:37   451   0

无论是百度小程序还是微信小程序,app.json中规定的tabbar页面是不支持传参的,例如:

code腾石建站

  1. <navigator url='../service/service?typeid=6' openType="switchTab">
  2. 服务项目
  3. </navigator>


上面的navigater跳转有个属性:openType="switchTab"意思是打开tabbar页面service,虽然有个参数typeid=6,但是typeid=6并不能呗tabbar页面接收,造成打开tabbar页面的时候用于都是默认栏目。

(1)第一步:通过bindtap绑定方法触发缓存,把typeid存起来
虽然tabbar不支持传参,但是我们可以通过缓存的方式获取传递的参数,那么上面的navigator直接跳转的方式就不行了,需要封装一个方法:

  1. <view class='service_li' bindtap='show_service' data-typeid='11' data-listtype='3'>
  2. 服务项目
  3. </view>

index页面的“服务项目”通过bindtap绑定一个show_service方法,这个show_service会传递后边的data-*里边的所有参数。
在index.js中写上show_service方法:

  1. show_service: function (e) {
  2. var data = e.currentTarget.dataset;
  3. var title = data.title; //获取传递的title
  4. var typeid = data.typeid; //获取传递的typeid
  5. var listtype = data.listtype; //获取传递的listtype
  6. //通过setStorageSync方法将typed存入stypeid中,名字可以自己任意定
  7. wx.setStorageSync('stypeid', typeid)
  8. wx.switchTab({ //通过switchTab方法跳转到对应页面
  9. url: '/pages/service/service?typeid=' + typeid + "&title=" + title + "&listtype=" + listtype, //后边参数其实无效可以直接写成:‘/pages/service/service’
  10. })
  11. },

这样我们就把用户点击首页所传递的参数typeid存到缓存里边了

(2)第二步:在service中去获取typeid
在service.js中的onload或者onshow中加入typeid的方法,为了兼容用户是直接通过tabbar进入的情况,需要一个默认的typeid,参考代码:

  1. var stypeid = wx.getStorageSync('stypeid');//通过缓存获取typeid
  2. var typeid = stypeid ? stypeid : that.data.typeid; //如果stypeid存在读取,否则读取默认的typeid

然后我们可以直接通过getList()方法直接读取api获取内容列表了

  1. that.getList(typeid);


说明:
(1)
如果你不是通过首页的show_service方法进入service页面的,那么就不会触发更新缓存,所以typeid的值是不会变的,通过点击tabbar进入service页面会永远显示某一个页面,你可以在onHide方法中增加一个重置或者情况stypied的方法,不过不建议这么弄

(2)service页面的切换栏目后,我们可以在switch_tab方法中加入修改缓存的方法,动态存入当前栏目的typeid

  1. switch_cat: function (e) {
  2. var that = this;
  3. var CATEGORYS = wx.getStorageSync('categorys')//调用栏目缓存
  4. var data = e.currentTarget.dataset;
  5. var typeid = data.typeid;
  6. var listtype = data.listtype;
  7. var curtypeid = data.typeid;
  8. that.setData({
  9. curtypeid: curtypeid,
  10. listtype: listtype,
  11. page: 1
  12. })
  13. wx.setNavigationBarTitle({
  14. title: CATEGORYS[curtypeid]['typename'] + '-' + wx.getStorageSync('system').seotitle
  15. });
  16. that.getList(typeid);
  17. },

不过,切换栏目时候,要不要更改缓存,根据自己需要,没必要必须切换

同理,如果你设置新闻页面、案例页面等页面的时候可以用同样的方法 存入缓存然后新闻、案例通过缓存判断需要显示的栏目
比如新闻:

  1. wx.setStorageSync('newsid', typeid)//存入newsid
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP