微信小程序动态设置tab-bar

今晚吃火锅耶 2023-04-11 原文

微信小程序动态设置tab-bar（自定义）

配置自定义tab-bar的方法这里省略，可以参考官方文档

动态设置tab-bar

需求：根据权限判断底部tab-bar显示内容
例如普通用户这里不显示赛事tab，特殊用户需要在进入小程序的时候显示赛事tab

实现方法

// app.js中请求当前登录权限，并将tab信息存到globalData中
// 请求回来之后判断is_competition_on字段
// 赋值给globalData中的tabList（默认只有两项）

that.globalData.tabList = [
          {
            "pagePath": "",
            "text": "",
            "iconPath": "/images/tabbar/",
            "selectedIconPath": "/images/tabbar/"
          },
          {
            "pagePath": "/pages/competitions/index/index",
            "text": "赛事",
            "iconPath": "/images/tabbar/match.png",
            "selectedIconPath": "/images/tabbar/match-active.png"
          },
          {
            "pagePath": "",
            "text": "",
            "iconPath": "",
            "selectedIconPath": ""
          }
        ]

在custom-tab-bar组件中赋值给对应的list

  attached() {
    let that = this
    that.setData({
      list: app.globalData.tabList
    })
    getApp().watch(that.watchBack.bind(that)) // 监听并回调
  },
  methods: {
    watchBack(list) {
       this.setData({
        list: list
      })
    },
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      console.log(data, this.data.list);
      console.log(e.currentTarget.dataset.index);
      wx.switchTab({
        url:url
      })
    }
  }

注意！！！由于请求权限时很有可能出现还没请求回来就执行了custom-tab-bar的attach方法，所以这个app.globalData.tabList很可能还是默认值，所以需要对globalData的tabList数据进行监听。

在监听这一步中getApp().watch(that.watchBack.bind(that))需要注意

// 如果是getApp().watch(that.watchBack)
// 那么在watchBack回调函数中执行this.setData 这个this指向的是undefined，因此需要改变this指向！
getApp().watch(that.watchBack.bind(that))
 // 这里试验用call和apply无法改变this，原因后面来讲

// app.js中使用Object.defineProperty监听 自定义watch函数
watch:function (method) {
    var obj = this.globalData;
    var temp = obj.tabList;
    Object.defineProperty(obj,"tabList", {
      configurable: true,
      enumerable: true,
      set: (value) => {
        temp = value
        method(value); // 这里回调传值
      },
      get:function(){。
        return temp
      }
    })
  },

这样下来就能正常的获取到tabList的值并且赋值夹杂知识点Object.defineProperty去复习

为什么call和apply不行

这里涉及到一个知识点
call，apply和bind的区别

具体可以参考这位博主的笔记
先来看使用call和apply改变this指向的报错信息

method这里是app.js中watch传参，这里就很清楚了，call和apply的返回值不是函数而是调用函数的返回值，因此这里会报is not a function这个错误。

动态设置tab-bar还有需要注意的地方就是点击对应的tab时需要自己进行配置
实现方法是通过getTabBar()方法，具体也可以参考官方文档。

经过实际操作后测试发现这种方式有个很坑的问题，ios在加载tab-bar的时候，如果初始化时默认值为两个tab，动态生成三个，ios会采用初始化的值，应该是用的缓存中的初始值，后续赋值就无效。

改进：
将赋值放到页面上操作，不在组件或者app.js中操作tabList的值。

在首页onShow方法中判断，

onShow() {
	//app.globalData.tabList2 为新值 ，app.globalData.tabList为初始化的值，判断后根据实际情况赋值。
	 this.getTabBar().setData({
          list: app.globalData.tabList2,
        })
}

其他页面也可以使用getTabBar().setData()来处理tabList的值。

有关微信小程序动态设置tab-bar的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby CSV : How can I read a tab-delimited file? - 2
CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？最佳答案尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
微信小程序通过字典表匹配对应数据 - 2
前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
微信小程序开发入门与实战（Behaviors使用） - 2
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现

微信小程序动态设置tab-bar