微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?

这篇具有很好参考价值的文章主要介绍了微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在使用自定义tabbar时,你可能会需要获取tabbar的高度,但是按照网上的方法却得不到正确的结果,这让你十分头疼。那么该怎么办呢?小编为大家整理了以下几个方法,希望能够帮到大家。

1️⃣ 使用wx.getSystemInfoSync()方法获取系统信息,然后通过计算得出tabbar的高度。

示例代码如下:文章来源地址https://www.toymoban.com/news/detail-507892.html

const systemInfo = wx.getSystemInfoSync();
const height = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight - 44;
console.log('tabbar的高度为:', height);

2️⃣ 在page.json文件中设置"custom": true,然后在tabBar组件上绑定一个id,接着在页面的onLoad生命周期函数中使用wx.createSelectorQuery()方法获取tabBar组件的高度。

示例代码如下:

// page.json中设置
{
  "usingComponents": {
    "tab-bar": "/components/tab-bar/tab-bar"
  },
  "custom": true
}

// page.wxml中使用
<tab-bar id="myTabBar"></tab-bar>

// page.js中使用
onLoad: function () {
  const query = wx.createSelectorQuery();
  query.s

到了这里,关于微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序中使用 TDesign 自定义 TabBar

    根据 微信官方文档 描述,每个 tab 页下的自定义 tabBar 组件实例是不同的; 如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态 在使用到 TabBar 的页面中加入以下代码

    2024年02月08日
    浏览(44)
  • 微信小程序如何实现自定义导航栏、导航栏手机适配(获取导航栏、状态栏高度和胶囊位置)以及踩过的坑

    背景:不用官方默认的导航栏,想用自己自定义的 实现效果: :顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊 原理: 自定义导航栏无非就是求得导航栏高度,并让内容容器垂直方向居中于导航栏高度 1.获取手机系统状态栏高度 2.获取胶囊位置(包括高度) 3.求得

    2024年03月12日
    浏览(62)
  • uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

    1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot=\\\'inactive-icon\\\'(选中的图标)和slot=\\\'inactive-icon\\\'(未选中的图标)自定义图片样式 u-tabbar组件默认已经为i

    2024年02月13日
    浏览(74)
  • 微信小程序的自定义TabBar及Vant的使用

    1、在 资源管理器 空白位置,点右键打开 在外部终端窗口打开 2、初始化NPM npm init -y 3、安装命令 npm i @vant/weapp@1.3.3 -S --production 4、构建NPM包 在 工具 里选择构建NPM包 5、删除style:v2 在app.json里,删除\\\"style\\\":\\\"v2\\\" 6、按需引入 7、使用 1、定义 2、使用 1、配置 在app.json中的 ta

    2024年02月14日
    浏览(41)
  • 微信小程序自定义tabBar以及图标-使用vant-weapp

    微信官方文档介绍 官方文档 1、在小程序根目录下创建custom-tab-bar文件夹,并创建以下文件。 custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-barr/index.wxss 2、修改custom-tab-bar/index.js(清除初始化的内容) 3、修改custom-tab-bar/index.json(引入vant 组件) 4、修改custom-tab-

    2024年02月11日
    浏览(59)
  • 微信小程序自定义底部菜单设计,固定在底部,并非使用tabBar设计

    1.微信小程序自定义底部菜单设计,并且固定在底部,并非tabBar设计 场景:比如加载详情页时:底部需要加入购物车、收藏、返回主页等设计 效果图: 点击事件发生 xx.wxml 样式设计xx.wxss js设计xx.js

    2024年02月16日
    浏览(49)
  • 定义tabbar,以及解决原生微信小程序使用vant的tabbar的bug(点击俩次图标才正确激活)

    详细步骤,可以参考小程序官方给出的文档: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 在 app.json 中的 tabBar 项指定 custom 字段 在代码根目录下添加入口文件: custom-tab-bar用自定义组件的方式编写即可,用自定义组件的方式编写即可,该自定义组件完全接

    2024年04月14日
    浏览(40)
  • 微信小程序自定义tabBar

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月24日
    浏览(66)
  • 微信小程序——自定义底部tabBar

    目录  实现步骤 1、配置信息 2、添加代码文件。  3、在该目录下编写代码即可。 二、在app.json里面添加tabBar配置 三.、在custom-tab-bar添加配置 1. 在custom-tab-bar创建如下目录 2.给index.wxml添加tabBar的结构代码   3. 给index.js 添加数据配置 和 事件方法 4. 给index.wxss 添加样式 四、

    2024年02月16日
    浏览(55)
  • 微信小程序自动获取顶部导航栏高度

    1、本人是通过uniapp开发的微信小程序,原生开发基本相同,首先在data里声明变量 2、其次在onLoad生命周期中获取当前手机的导航栏宽高数据 3、navHeight获取的是当前手机型号的导航栏总高度;searchMarginTop获取的是手机顶部到小程序胶囊的高度,也就是下图黄色线框的高度;

    2024年02月11日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包