大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
小程序自定义tabbar
先做一下效果展示吧
本案例是按照官网来做的
app.js代码：
下面的list，官网说是必须的，但我感受不到它的用处
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/page/index",
"text": "首页",
"iconPath": "/imgs/tab.png",
"selectedIconPath": "/imgs/tab.png"
},
{
"pagePath": "pages/scroll/index",
"text": "滚动",
"iconPath": "/imgs/tab.png",
"selectedIconPath": "/imgs/tab.png"
}
]
},
"usingComponents": {
}
tabbar组件的创建
在根目录下创建custom-tab-bar目录，然后在该目录下新建组件component,注意是组件，不要建成page页面，虽然都一样是js/json/wxml/wxss四个文件
custom-tab-bar/index.js代码
data: {
curIndex: 0,
color: "#00f",
selectedColor: "#ff0",
list: [
{
pagePath: "/pages/page/index",
iconPath: "/imgs/tab.png",
selectedIconPath: "/imgs/tab1.png",
text: "首页"
}, {
pagePath: "/pages/scroll/index",
iconPath: "/imgs/tab.png",
selectedIconPath: "/imgs/tab1.png",
text: "滚动"
},
]
}，
methods: {
switchTab(e) {
let url = e.currentTarget.dataset.url
let index = e.currentTarget.dataset.index
wx.switchTab({
url
})
// this.setData({
// curIndex:index
// })
wx.setStorageSync('curIndex', index)
},
}
custom-tab-bar/index.wxml代码
<cover-view class="container">
<cover-view class="item" bindtap='switchTab' wx:for="{
{list}}" wx:key="{
{index}}" data-index="{
{index}}" data-url="{
{item.pagePath}}">
<cover-image class="icon" src='{
{index==curIndex?item.selectedIconPath:item.iconPath}}'></cover-image>
<cover-view class="text" class="{
{index==curIndex?'textStyle':''}}">{
{item.text}}</cover-view>
</cover-view>
</cover-view>
custom-tab-bar/index.wxss代码
.container{
height: 120rpx;
background:green;
display: flex;
}
.item{
flex:1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.icon{
width:60rpx;
height: 60rpx;
margin:0 auto;
}
.textStyle{
color:#fff;
}
最好给自定义tabbar设置一个高度，这样的话，如果页面需要用到scroll-view那高度也好控制，scroll-view的精确控制可以参考scroll的高度设置
最后，设置tabbar的选中状态，要在每个tab页面的onShow中设置
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
curIndex: 1
})
}
自定义tabbar就这样可以了
但是，
问题一：进入小程序第一次进行tabbar切换的时候有闪烁问题
问题二：本案例的启动页是首页，第一次切换到滚动也的时候除了闪烁问题外，scroll-view的高度也比正常情况下小了100rpx（正好是滚动页中topNav的高度），下图是滚动页代码
<view class="topNav"></view>
<scroll-view style="{
{
'height:'+scrollHeight+'px'}}" scroll-y>
<view class="red"></view>
<view class="blue"></view>
<view class="red"></view>
<view class="blue"></view>
<view class="red"></view>
<view class="blue"></view>
</scroll-view>
所以本例的自定义tabbar就实现了
（ps:如果滚动页设置为启动页，就不会有问题二的出现）
闪烁问题，网上也找不到解决的办法，官网也未提及，希望有办法的朋友分享给我
如果想要避免上述问题，来一个完美的tabbar的话，就不要使用官网的方法，而采用单页面的形式
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209948.html原文链接：https://javaforall.net
