How to handle the small program tabbar that does not support parameter transfer

 

Whether it is Baidu applet or wechat applet ,app.json Stipulated in tabbar The page does not support parameter transfer , for example ：

code Jianteng stone station

1. <navigator url='../service/service?typeid=6' openType="switchTab"> 
2. Service project  
3. </navigator> 

above navigater Jump has an attribute ：openType="switchTab" It means to open tabbar page service, Although there is a parameter typeid=6, however typeid=6 Not really tabbar Page to receive , Cause open tabbar Pages are used for default columns .

（1） First step ： adopt bindtap Binding method triggers cache , hold typeid Save up
although tabbar Parameter transfer is not supported , But we can get the passed parameters by caching , So the one above navigator The direct jump is not enough , You need to encapsulate a method ：

1. <view class='service_li' bindtap='show_service' data-typeid='11' data-listtype='3'> 
2. Service project  
3. </view> 

index Page “ Service project ” adopt bindtap Bind one show_service Method , This show_service Will be passed on to the next data-* All the parameters inside .
stay index.js Write in show_service Method ：

1. show_service: function (e) { 
2.     var data = e.currentTarget.dataset; 
3.     var title = data.title; // Get the delivered title
4.     var typeid = data.typeid; // Get the delivered typeid
5.     var listtype = data.listtype; // Get the delivered listtype
6.     // adopt setStorageSync Methods will typed Deposit in stypeid in , You can choose your own name
7.     wx.setStorageSync('stypeid', typeid) 
8.     wx.switchTab({ // adopt switchTab Method to jump to the corresponding page
9.       url: '/pages/service/service?typeid=' + typeid + "&title=" + title + "&listtype=" + listtype, // The following parameters are actually invalid and can be written directly as ：‘/pages/service/service’
10.     }) 
11.   }, 

In this way, we will transfer the parameters that users click on the home page typeid Stored in the cache

（2） The second step ： stay service To get typeid
stay service.js Medium onload perhaps onshow Add typeid Methods , In order to be compatible with users, it is directly through tabbar The situation of entry , Need a default typeid, Reference code ：

1. var stypeid = wx.getStorageSync('stypeid');// Get... Through cache typeid 
2. var typeid = stypeid ? stypeid : that.data.typeid; // If stypeid There is a read , Otherwise, read the default typeid

Then we can go directly through getList() Method to read directly api Get the content list

1. that.getList(typeid); 

explain ：
（1） If you don't go through the homepage show_service Methods into the service Page , Then the update cache will not be triggered , therefore typeid It's not going to change , By clicking on tabbar Get into service The page will always show a certain page , You can onHide Add a reset or condition to the method stypied Methods , However, it is not recommended to do so

（2）service After switching columns of the page , We can do it in switch_tab Method to modify the cache , Dynamically stored in the current column typeid

1. switch_cat: function (e) { 
2.     var that = this; 
3.     var CATEGORYS = wx.getStorageSync('categorys')// Call column cache  
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.   }, 

however , When switching Columns , Do you want to change the cache , According to your own needs , There is no need to switch

Empathy , If you set up a news page 、 The same method can be used for the case page and other pages Put it in the cache and then the news 、 The case judges the columns to be displayed by caching
Like news ：

1. wx.setStorageSync('newsid', typeid)// Deposit in newsid