如何从tabbar页面传数据

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

复制代码
<navigator url='../service/service?typeid=6' openType="switchTab"> 
服务项目 
</navigator> 

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

(1)第一步:通过bindtap绑定方法触发缓存,把typeid存起来

虽然tabbar不支持传参,但是我们可以通过缓存的方式获取传递的参数,那么上面的navigator直接跳转的方式就不行了,需要封装一个方法:

复制代码
<view class='service_li' bindtap='show_service' data-typeid='11' data-listtype='3'> 
服务项目 
</view> 

index页面的"服务项目"通过bindtap绑定一个show_service方法,这个show_service会传递后边的data-*里边的所有参数。

在index.js中写上show_service方法:

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

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

(2)第二步:在service中去获取typeid

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

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

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

复制代码
that.getList(typeid); 

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

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

复制代码
switch_cat: function (e) { 
    var that = this; 
    var CATEGORYS = wx.getStorageSync('categorys')//调用栏目缓存 
    var data = e.currentTarget.dataset; 
    var typeid = data.typeid; 
    var listtype = data.listtype; 
    var curtypeid = data.typeid; 
    that.setData({ 
      curtypeid: curtypeid, 
      listtype: listtype, 
      page: 1 
    }) 
    wx.setNavigationBarTitle({ 
      title: CATEGORYS[curtypeid]['typename'] + '-' + wx.getStorageSync('system').seotitle 
    }); 
    that.getList(typeid); 
  }, 
相关推荐
2601_949950632 小时前
练题簿:把备考资料装进小程序,随时开启高效在线刷题
人工智能·小程序·刷题·练习·小程序推荐
QQ_21696290963 小时前
基于SpringBoot+Vue的小生活平台的设计与实现
java·数据库·vue.js·spring boot·spring·微信小程序·生活
飞梦工作室3 小时前
H5页面能否直接播放视频号直播?实战方案与踩坑总结
微信小程序·小程序
河南花仙子科技18 小时前
企业定制小游戏助力品牌软性传播
大数据·科技·游戏·小程序
StevenLdh19 小时前
情绪小恐龙:一个微信小程序从架构设计到部署上线的全记录
微信小程序·小程序·notepad++
m0_5873830019 小时前
折扣卡CPS软件开发实战:从系统架构设计到上线指南
java·小程序·架构·需求分析
mykj155119 小时前
赛事报名小程序系统:一站式解决赛事管理难题
小程序·app开发·体育赛事报名小程序·赛事app
EatFan21 小时前
Java接入微信支付保姆式教程(一):支付流程、商户号与环境准备
小程序·微信支付·jsapi支付
00后程序员张1 天前
怎么用 Egret(白鹭引擎)打包 iOS 应用并上架 App Store?
android·ios·小程序·https·uni-app·iphone·webview
Bs_MoneyMagnet1 天前
基于springboot+vue的旅游行程分享与推荐小程序的设计与实现 源码+文档
java·vue.js·spring boot·后端·微信小程序·毕业设计·计算机毕业设计