526互联

微信小程序--自定义tabbar切换页面时，保留数据方案

发布时间 2023-11-14 10:00:25作者: 小那

自定义的tabbar组件，每次切换页面时都会重新加载页面和数据，需要通过一些方法把tabbar菜单的数据保留下来，不要每次都请求数据。

方案一：在app.js文件里定义全局数据（本次项目采用的是可以在后台管理里配置的数据，所以采用了方案一）

1、在app.js文件里定义一个全局变量

App({
  globalData: {
　　tabbarlist:{}
　}
})
2、在tabbar组件的js文件获取app.js保留的数据
const app = getApp();
Component({
ready() {
   //将保留数据赋值给tabbar的list
    this.setData({
      list:app.globalData.decorateTabbar
    })
　　如果是第一次加载，保留的数据是空的，则需要请求接口获取数据
    if (!isEmpty(app.globalData.decorateTabbar)) this.getDecorateData();
  },
methods: {
getDecorateData() {
      getshopDecorate().then(({ data }) => {
　　//处理数据
        let arr = data.find((element) => {
          return element.isShow && element.type == "tabbar";
        });
        arr.ext = JSON.parse(arr.ext);
        let arr2 = arr.ext.filter((ele) => {
          if (ele.isShow) return ele;
        });
　　给当前页面的list和保留的数据赋值
        if (!isEmpty(app.globalData.decorateTabbar)) {
          this.setData({
            list: { isShow: arr.isShow, ext: arr2 },
          });
        }
        app.globalData.decorateTabbar = { isShow: arr.isShow, ext: arr2 };
      });
    },
}
)}
 
方案二：使用缓存机制（如果tabbar的数据一旦定义就不在变动，可以采用这种方案）
wx.setStorageSync('someData', 'Hello World');//在获取到数据时存储到缓存里
var someData = wx.getStorageSync('someData'); console.log(someData); // 输出：Hello World   //切换再进入页面时，从缓存种读取数据
 
方案三：使用组件通信，

当 TabBar 切换页面时，通过自定义事件或消息订阅机制，将数据传递给目标页面。

1、在目标页面中监听事件或订阅消息，并在相应的回调函数中处理数据：

Page({ onLoad: function() { var that = this; wx.onAppShow(function(data) { console.log(data); // 输出：Hello World that.setData({ someData: data }); }); } });
2、在切换页面时，触发相应的事件或发布消息，并将数据传递给目标页面：

wx.onTabItemTap(function(item) { wx.triggerEvent('onAppShow', 'Hello World'); })