小程序（三）配置tabbar及自定义tabbar样式

关于tabbar部分，官方文档是有明确的说明的，当然，我这里是不存在把官方文档给你复制一遍的情况。我大概把我再看官方文档过程中遇到的坑，大概复述一下。

一：配置tabbar

这个主要是使用小程序自带的tabbar，在项目根目录下的app.json中配置，这个简单配置一下就可以了。

这里放一下我的app.json配置：

{"pages": ["pages/index/index","pages/logs/logs","pages/article/article","pages/board/board","pages/remark/remark"],"tabBar": {"selectedColor": "#31869B","list": [{"current": 0,"pagePath": "pages/index/index","text": "首页","iconPath": "/images/index-select.png","selectedIconPath": "/images/index-selected.png"},{"current": 1,"pagePath": "pages/remark/remark","text": "随言碎语","iconPath": "/images/sui-select.png","selectedIconPath": "/images/sui-selected.png"},{"current": 2,"pagePath": "pages/board/board","text": "留言板","iconPath": "/images/board-select.png","selectedIconPath": "/images/board-selected.png"}]},"usingComponents": {"weuitabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

更详细的tabbar配置属性说明，请移步官方文档《tabbar》

最后效果如下图所示：

二：自定义tabbar

有些时候，官方的样式并不能满足我们的要求，这个时候，我们就需要自定义tabbar的样式，当然，这个官方也是有说明的，只是，说明比较简单，官方给了一段示例代码。具体请移步官方文档《自定义tabbar》

然后，我这里大概分享下我是怎么写的：

App.json中，tabbar有一个custom属性，这个很重要，如果将这个属性设置为true，那么程序会默认使用自定义的tabbar。

那么我的app.json中的tabbar部分代码，就变成了下面的这个样子：

"tabBar": {"custom": true,    },

在小程序根目录下创建目录custom-tab-bar，名字一定要是这个，别瞎起名。

在目录中创建组件index，注意，这里一定要注意，这里创建的是组件，而不是页面，虽然他们都是四个文件，但是他们是完全不一样的。

创建成功之后，文件目录如下图所示：

然后，我们开始编写四个文件中的代码：

（1）：index.js

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#31869B",fontWeight:'bold',"list": [{"current": 0,"pagePath": "/pages/index/index","text": "首页","iconPath": "/images/index-select.png","selectedIconPath": "/images/index-selected.png"},{"current": 1,"pagePath": "/pages/remark/remark","text": "随言碎语","iconPath": "/images/sui-select.png","selectedIconPath": "/images/sui-selected.png"},{"current": 2,"pagePath": "/pages/board/board","text": "留言板","iconPath": "/images/board-select.png","selectedIconPath": "/images/board-selected.png"}]},attached() {},methods: {switchTab(e) {console.log(e);const idx = e.currentTarget.dataset.indexconst path = e.currentTarget.dataset.path// this.setData({//   selected: idx// })wx.switchTab({url: path,});}}
})

（2）：index.json

这里边本来我打算用weui的tabbar组件来着，但是目前还没玩明白，这个回头再说。

{"component": true,"usingComponents": {"weuitabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"}
}

（3）：index.wxml

<!-- 自定义tab -->
<view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="top_view" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" ><view><image class="img_" src="{{selected === index ?item.selectedIconPath : item.iconPath}}"></image></view><view style="color: {{selected === index ?selectedColor : color}}">{{item.text}}</view></view>
</view>

（4）：index.wxss

.top_view{float:left;width:33%;text-align:center; font-size:12px;
}
.img_{width:28px;height:28px;
}
.tab-bar{width:100%;position: fixed;bottom:0;padding:10rpx;margin-left:-4rpx;background:#FFFFFF;font-size:20rpx;color:#fcf7f7;box-shadow: 6rpx 6rpx 6rpx 6rpx rgb(248, 245, 245);
}

（5）：这个不单独指哪一个页面：

在tabBar跳转的页面，也就是tab 选中状态下，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

举个简单的例子，比如现在我从其他页跳回首页，那么我需要在首页的index.js中的代码应该是如下的样子：

const app = getApp()
Page({data: {},onShow(){if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 2    // 根据tab的索引值设置}) }}
})

这样操作完成之后，效果如下图所示：

但是吧，还有一个问题，来回切换的时候，图标会闪烁，这个使用官方给的这个方法，好像是没有什么太好的解决办法。

如果你有好的解决方式，请在下方评论。

文末有我开发时写的源码。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问我的小程序：

小程序（三）配置tabbar及自定义tabbar样式相关推荐

微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
入门微信小程序三（自定义组件）
1.组件的创建 ① 在项目的根目录中,鼠标右键,创建 components -> test 文件夹 ② 在新建的 components -> test 文件夹上,鼠标右键,点击" ...
微信小程序—相关配置
目录微信小程序介绍什么是小程序? 小程序可以干什么? 相关资料第一个小程序申请帐号测试号申请安装开发工具你的第一个小程序编译预览目录结构 JSON 配置小程序配置 app.json ...
逆战之微信小程序全局配置
微信小程序之全局配置-1 小程序的配置分为全局配置.页面配置及sitemap 配置全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以 ...
微信小程序全局配置参数详解app.json
全局配置 cc文件内容为一个 JSON 对象,有以下属性: 配置项 entryPagePath 指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动.小程序列表启动等.如果不填,将默认 ...
从0到一开发微信小程序（3）—小程序框架配置
文章目录其他相关文章 1.小程序框架 1.1.全局配置 1.1.1.Pages 1.1.1.1.entryPagePath 1.1.1.2.生成页面方式 1.1.2.window 1.1.3.tab ...
微信小程序之配置app.json
微信小程序之配置app.json 本人写了一个在线扫码借书的小程序,打算分享一下心得和代码,欢迎关注,再次希望各位大佬指出不足 {"pages": ["pages/ind ...
微信小程序 php配置,微信小程序的配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json{ "pa ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
首页布局跟小程序如何配置Iconfont—小程序入门与实战（七）
4-1 经过上一章节的学习我们已经搭建了项目的整个框架,雏形已成.接下来我们只需要的往里面堆东西就可以了. 设计稿网址(14天分享有效,过期的可以找我拿): https://lanhuapp.com/ ...

小程序（三）配置tabbar及自定义tabbar样式

小程序（三）配置tabbar及自定义tabbar样式相关推荐

最新文章

热门文章