微信小程序+VantWeapp自定义tabBar，解决 this.gettabbar is not a function。

简单记录一下，写自定义tabBar时的过程与一些问题：

1 引入VantWeapp时，主要用的命令：

npm i @vant-weapp

使用这个命令，非常方便后期引入 vant-tabbar 和 vant-tabbar-item，不用担心路径问题。

例如 custom-tab-bar 文件夹下的 index.json 的引入可以这样写：

{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"}
}

2 创建 custom-tab-bar 文件夹

注意该文件夹一定要和 pages 文件夹同一级，不然小程序找不到。

然后 index.js 和 index.wxml 和官网一样就不多赘述了。

3 创建需要实现的导航效果的页面文件夹

注意：这里创建文件的时候一定要注意名字。

文件一定要是 index 这种的，之前我创建文件名字写的是 me.js me.wxml 一直报错。

提示 this.gettabbar is not a function。

后来，我将 me 文件夹下的 me.js 的名字改成 index.js 就不会报错了。

Page({onShow() {this.getTabBar().init();}
})

如果对您有帮助的话，欢迎点赞留言，感谢您观看我的文章哦。

微信小程序+VantWeapp自定义tabBar，解决 this.gettabbar is not a function。相关推荐

微信小程序_25,自定义tabBar
案例效果; 在此案例中,用到的主要知识点如下: 自定义组件 Vant组件库 Mobx数据共享组件样式隔离组件数据监听器组件的behaviors Vant样式覆盖实现步骤自定义tabBar分为 ...
微信小程序开发自定义按钮实现分享转发功能
文章目录前言一.详细步骤前言微信小程序,默认的分享功能是通过右上角的 "···" 按钮调用的,那么如何通过自定义按钮调用呢?本文将给出具体方法. 一.详细步骤我采用了mp ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序+VantWeapp自定义tabBar，解决 this.gettabbar is not a function。

微信小程序+VantWeapp自定义tabBar，解决 this.gettabbar is not a function。相关推荐

最新文章

热门文章