vant weapp在小程序自定义tabbar

1.首先在小程序根目录miniprogram文件夹下创建 custom-tab-bar 文件夹包含 index.js index.json index.wxml

其中index.js文件内容 注意url中前面一定要以/开始

// index.js文件
Component({data: {active: 0,list: [{"url": "/pages/index/index","icon": "home-o","text": "主页"},{"url": "/pages/publish/publish","icon": "add","text": "发布"},{"url": "/pages/my/my","icon": "friends-o","text": "我的"}]},methods: {onChange(e) {console.log(e,'e')wx.switchTab({url: this.data.list[e.detail].url});this.setData({ active: e.detail });},init() {const page = getCurrentPages().pop();this.setData({active: this.data.list.findIndex(item => item.url === `/${page.route}`)});}}
});

index.json文件内容，以下是通过npm安装的vant webapp

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

index.wxml文件内容

<!--miniprogram/custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange"><van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{item.text}}</van-tabbar-item>
</van-tabbar>

2.修改app.json

app.json文件把custom置true

全部内容如下：注意pages和tabBar要和如下一样

{"pages": ["pages/index/index","pages/publish/publish","pages/my/my","custom-tab-bar/index"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "云开发 QuickStart","navigationBarTextStyle": "black","navigationStyle": "custom","enablePullDownRefresh": true},"sitemapLocation": "sitemap.json","style": "v2","usingComponents": {"cu-custom": "/colorui/components/cu-custom"},"tabBar": {"custom": true,"list": [{"text": "首页","pagePath": "pages/index/index"},{"text": "发布","pagePath": "pages/publish/publish"},{"text": "我的","pagePath": "pages/my/my"}]}
}

3.最后每个使用tabbar的页面加上这一句。

  /*** 生命周期函数--监听页面显示   在每个tabbar页面onshow 调用即可;*/onShow: function () {this.getTabBar().init();},

效果：

详细代码在：https://mp.csdn.net/console/upDetailed

vant weapp在小程序自定义tabbar相关推荐

小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容
小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容参考文章: (1)小程序自定义tabbar custom-tab-bar 6s出不来解决方案,c ...
小程序自定义tabbar,子页面也显示tabbar
小程序自定义tabbar,子页面也显示tabbar 我找了很多很多的文件,大都是显示一级页面的tabbar的,子页面显示tabbar几乎没有,我自己整理了一下.如果有不对的地方,希望评论指出,我会进一 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题
我用的是 Vant Weapp UI组件库, 需要用store 全局共享数据解决tabbar切换激活样式问题关于如何使用 Mobx,创建store可参考:微信小程序 Mobx实现数据共享(创建s ...
微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...

vant weapp在小程序自定义tabbar

1.首先在小程序根目录miniprogram文件夹下创建 custom-tab-bar 文件夹包含 index.js index.json index.wxml

2.修改app.json

3.最后每个使用tabbar的页面加上这一句。

vant weapp在小程序自定义tabbar相关推荐

最新文章

热门文章

vant weapp在小程序自定义tabbar

1.首先在小程序根目录miniprogram文件夹下创建 custom-tab-bar 文件夹 包含 index.js index.json index.wxml

2.修改app.json

3.最后每个使用tabbar的页面加上这一句。

vant weapp在小程序自定义tabbar相关推荐

最新文章

热门文章

1.首先在小程序根目录miniprogram文件夹下创建 custom-tab-bar 文件夹包含 index.js index.json index.wxml