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

这篇具有很好参考价值的文章主要介绍了微信小程序动态设置tab-bar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序动态设置tab-bar(自定义)

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

动态设置tab-bar

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

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

实现方法

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

// 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指向的报错信息
微信小程序动态设置tab-bar
method这里是app.js中watch传参,这里就很清楚了,call和apply的返回值不是函数而是调用函数的返回值,因此这里会报is not a function这个错误。

动态设置tab-bar还有需要注意的地方就是点击对应的tab时需要自己进行配置
实现方法是通过getTabBar()方法,具体也可以参考官方文档。
微信小程序动态设置tab-bar
经过实际操作后测试发现这种方式有个很坑的问题,ios在加载tab-bar的时候,如果初始化时默认值为两个tab,动态生成三个,ios会采用初始化的值,应该是用的缓存中的初始值,后续赋值就无效。

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

在首页onShow方法中判断,

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

微信小程序动态设置tab-bar
其他页面也可以使用getTabBar().setData()来处理tabList的值。文章来源地址https://www.toymoban.com/news/detail-498062.html

到了这里,关于微信小程序动态设置tab-bar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 开发微信小程序 中使用 custom-tab-bar创建自定义tabbar

    1.   目录结构必须按照如图所示,在src 目录下   2. index.js 3.  index.html 4.  wxss 5. index.json  按照微信官方文档,以及代码片段,需要在tabbar 页面中onshow生命周期内设置 tabbar 的选中状态,但是在 uniapp 创建的 页面中是 this 是不包含 getTabBar 方法的, 只有通过 this.$mp.page或者

    2024年02月10日
    浏览(34)
  • 微信小程序:动态修改自定义组件中vant-tab选中标签的大小并加粗标签

            1.在自定义组件的wxss文件里添加如下代码,此处还可以改变字体颜色之类的:         2.在自定义组件的json文件中修改组件样式隔离模式:        3.还遇到一个天坑的问题,这个自定义组件必须放在父组件的第一个引用位置,否则无法生效。我之前tab组件在upload组

    2024年02月06日
    浏览(52)
  • 微信小程序设置动态变量设值

    微信小程序如何动态变量设值? 示例代码如下: // 二层数据情况

    2024年02月07日
    浏览(39)
  • 微信小程序--动态设置导航栏颜色

    既然要动态设置导航栏颜色,估计 自定义导航栏 也跑不了 关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor 官方给出的示例: 我的实际使用: 需要注意的是: frontColor只有两个选择: #ffffff 和 #000000 frontColor 、 backgroundColor 两个都需要设置

    2024年02月16日
    浏览(40)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(40)
  • 微信小程序--动态设置导航栏颜色 (navigationBarBackgroundColor)

    微信小程序设置导航栏颜色 设置navigationBarBackgroundColor 属性 微信小程序官方文档提供了API wx.setNavigationBarColor 代码示例 有几个需要注意的点 1. frontColor只有两个选择:#ffffff   和 #000000 2. frontColor 、 backgroundColor 两个都需要设置 如果在微信小程序中设置导航栏的背景颜色失败

    2024年02月08日
    浏览(44)
  • 微信小程序动态设置标题 IOS、安卓通用(直接使用)

    1.默认标题--在json文件中写  2.动态设置标题    2-1:固定写:        使用方法:直接把这段代码放在onLoad里面 即表示--界面记载时候就执行所设置的title         wx.setNavigationBarTitle({             title: \\\"XXXX\\\"         })  2-2:动态变更标题        使用方法:

    2024年02月09日
    浏览(41)
  • 小程序自定义底部导航 custom-tab-bar

    前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航;或者导航样式需要个性化设计。此时就需要用到自定义底部导航 custom-tab-bar。 1、根目录下创建custom-tab-bar目录 2、在app.json文件中配置导航信息 3、custom-tab-bar/index.wxml 文件内容 4、custom-tab-bar/ind

    2024年02月11日
    浏览(36)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(65)
  • 【微信小程序】页面tab栏与页面内容联动_微信小程序实现tabs跟下面的内容联动

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新大数据全套学习资料》,

    2024年04月28日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包