小程序 vant-weapp 自定义切换 tabbar 单页面

最新推荐文章于 2024-07-02 09:46:30 发布

「已注销」

最新推荐文章于 2024-07-02 09:46:30 发布

阅读量3.5k

点赞数

https://github.com/gztrljh

本文链接：https://blog.csdn.net/ljh101/article/details/113840746

版权

本文介绍了在 vant-weapp 中实现自定义切换tabbar的单页面方法，尽管所有逻辑集中在一个页面可能导致维护困难，但这种方式避免了页面闪烁，提供了接近原生tabbar的体验，且无数量限制，切换流畅。

摘要由CSDN通过智能技术生成

Page({
   
  data: {
   
    //公共部分
    hidden:[false,true,true,true],
    active: 0,
    //首页所用的数据
    one:{
   

    },
    //第二个页面所用数据
    two:{
   
      //文章数据
      post:[],
      //加载
      loaded:false
    },
    //第三个页面所用数据
    three:{
   

    },
    //第四个页面所用数据
    four:{
   

    }
     //第五 六 七 以此类退

   

  },

  //tabbar底部切换事件
  onChange(event) {
   
    this.changePage(event.detail);
    //根据不同的页面加载不同的数据
    if(this.data.active == 1){
   
      // console.log("这是第二个页面")
      //在此处发起请求获取数据，
      //...
      //在第二个页面标签中给一个加载动画
      //判断第二个页面的数据是否为空，如果为空则不进行请求
      if(this.data.two.post.length == 0){
   

        //动画加载
        this.setData({
   
          ['two.loaded']: true
        })

             // 解决回调地狱  es6提供 promise   ==>   es7 async await
    //此处为小程序原生请求
    wx.request({