uni-app上自定义微信小程序的tabbar

今天用uni-app开发微信小程序时，修改tabbar的样式无效，如selectedColor, iconWidth等，明明官网上都有这些属性，但在模拟器上就是没有效果。

自定义tabbar

1、在微信官网，自定义tabbar的页面，下载自定义tabbar示例代码；将其中的custom-tab-bar目录整个拷贝到项目根目录下；

2、修改custom-tab-bar/index.js的文件，路径都改为自己uni-app项目下的页面路径和图片路径

Component({data: {selected: 0,color: "rgba(0,0,0,0.39)",selectedColor: "rgba(0,0,0,0.93)",list: [{"pagePath": "/pages/index/index","iconPath": "/static/icon/11.png","selectedIconPath": "/static/icon/c11.png","text": "首页"},{"pagePath": "/pages/goods/index2","text": "商品","iconPath": "/static/icon/22.png","selectedIconPath": "/static/icon/c22.png"},{"pagePath": "/pages/shop/home","text": "门店","iconPath": "/static/icon/33.png","selectedIconPath": "/static/icon/c33.png"},{"pagePath": "/pages/my/index","text": "我的","iconPath": "/static/icon/44.png","selectedIconPath": "/static/icon/c44.png"}]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}}
})

3、pages.json文件tabbar配置：设置"custom": true

"tabBar": {"custom":true,"selectedColor": "rgba(0,0,0,0.93)","color": "rgba(0,0,0,0.39)","spacing": "4px","iconWidth": "24px","fontSize": "10px","height": "49px","list": [{"pagePath": "pages/index/index","iconPath": "static/icon/11.png","selectedIconPath": "static/icon/c11.png","text": "首页"},{"pagePath": "pages/goods/index2","text": "商品","iconPath": "static/icon/22.png","selectedIconPath": "static/icon/c22.png"},{"pagePath": "pages/shop/home","text": "门店","iconPath": "static/icon/33.png","selectedIconPath": "static/icon/c33.png"},{"pagePath": "pages/my/index","text": "我的","iconPath": "static/icon/44.png","selectedIconPath": "static/icon/c44.png"}]}

4、在main.js加入

// #ifdef MP-WEIXIN
Vue.mixin({methods:{setTabBarIndex(index) {if (typeof this.$mp.page.getTabBar === 'function' &&this.$mp.page.getTabBar()) {this.$mp.page.getTabBar().setData({selected: index})}}}
})
// #endif

5、在各个tabbar页面中调用setTabBarIndex方法，例如：

首页pages/index/index中加入

onShow(e) {// #ifdef MP-WEIXINthis.setTabBarIndex(0);// #endif
},

然后在custom-tab-bar中修改相应的样式即可。

uni-app上自定义微信小程序的tabbar相关推荐

uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数
本文是uniapp打包成安卓App. 一.注意事项 1.用到了分享功能,在打包App时,需要配置manifest.json:App 模块配置->Share.按照提示填写微信分享的信息,appid ...
APP 跳转微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在"管理中心-移动应用-应用详情-关联小程序信息&qu ...
uni-app app 跳转微信小程序（安卓/ios）
uni-app app 跳转微信小程序(安卓/ios) 近日接到需求,需要实现在 app 中直接跳转到微信小程序中,其实非常简单,uni-app 都已经集成好了. 安卓和ios 有点区别,这个需要注 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
App上如何跑小程序？ FinClip、mPaaS、Unisdk 小程序解决方案对比
小程序无疑是近几年发展最快速的技术之一!短短数年间,从无人问津到各大互联网巨头纷纷入局,成为继手机支付后,中国的移动互联网领先世界的第二个代表技术!中国的技术标准.开发者生态,已然得到大规模的普及应用 ...
dakai微信小程序 ios_iOS APP拉起微信小程序
背景:由于公司业务需求,我们公司自己开发了一个微信小程序,然后通过App拉起微信小程序进行交互,有一些功能也可以放在小程序中去实现! 准备:首先你在微信的开放平台创建应用,并通过审核,就是你的App具 ...
APP跳转微信小程序，跳转微信公众号
一.判断手机是否安装了微信的工具类: //判断手机是否安装了某些程序的工具类 public class IsInstallUtils {//判断是否安装了微信public static boolean ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
如何用Python快速实现一个垃圾分类APP【附带微信小程序】
嗨害大家好鸭!我是小熊猫❤ 今天这篇文章主要介绍的是: 如何利用现有的工具来实现一个垃圾分类的应用有什么python相关报错解答自己不会的.或者源码资料/模块安装/女装大佬精通技巧都可以来这里:( ...
阿里云服务器上搭建微信小程序服务端环境。
无论是搭建个人博客空间也好,微信小程序也罢,搭建环境必需的两点:云服务器.域名,下面一步步给搭建演示如果在一台阿里云服务器上搭建微信小程序服务端环境. 1.云服务器准备:可在阿里云购买ECS服务器 ...

uni-app上自定义微信小程序的tabbar

uni-app上自定义微信小程序的tabbar相关推荐

最新文章

热门文章