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

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

微信官方小程序自定义tabbar

1.添加 tabBar 代码文件

1) 从官网下载案例，如下：

2) 接着把custom-tab-bar整个文件拷贝到你的项目下：

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

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: [{pagePath: "/pages/index/index",selectedIconPath: "/static/tabs/home-active.png",iconPath: "/static/tabs/home.png",text: "首页"}, {pagePath: "/pages/message/message",selectedIconPath: "/static/tabs/message-active.png",iconPath: "/static/tabs/message.png",text: "消息"}, {pagePath: "/pages/news/news",selectedIconPath: "/static/tabs/contact-active.png",iconPath: "/static/tabs/contact.png",text: "联系"}]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}}
})

4) 修改pages.json文件tabbar配置：主要就是"custom": true这一项

 // #ifdef MP-WEIXIN"tabBar": {"custom": true,"color": "#007aff","selectedColor": "#ff0000","backgroundColor": "#FFFFFF","borderStyle":"black","list":[{"text":"首页","pagePath":"pages/index/index","iconPath":"static/tabs/home.png","selectedIconPath":"static/tabs/home-active.png"},{"text":"消息","pagePath":"pages/message/message","iconPath":"static/tabs/message.png","selectedIconPath":"static/tabs/message-active.png"},{"text":"新闻","pagePath":"pages/news/news","iconPath":"static/tabs/contact.png","selectedIconPath":"static/tabs/contact-active.png"}]},// #endif

2. 在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

3. 在页面中调用setTabBarIndex方法

调用这个方法，主要是解决abbar图标切换要点击tabbar两次才能有选中状态的问题
联系页面

 onShow()  {// #ifdef MP-WEIXINthis.setTabBarIndex(2);// #endif}

消息页面

 onShow()  {// #ifdef MP-WEIXINthis.setTabBarIndex(1);// #endif}

首页

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

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

微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...
微信小程序自定义TabBar和NavBar
先看效果图看似和正常开发的小程序布局相同,但代码却不相同,从而在自定义的代码中可以编写在默认模板中不能帮助我们完成的事情. 首先来说TabBar,这个内容的实现很容易,Flex布局嘛,除了这种很普通 ...