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

自定义的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'); })