自定义微信小程序tabBar,切换效果不会闪烁,逻辑上简单易懂,适合新手。
微信小程序官方有提供了一个tabBar,实现底部导航栏的功能,虽然简单易用,但无奈限制条件有点多,不适合很多情况。
本来打算参考网友的写法实现自定义tabBar,但搜索了一下,有的虽然实现了,但切换的时候会有闪烁的效果,体验不佳。有的可以做到切换不闪烁,但是逻辑上稍微有点复杂。(也许是我懒得搜索更多,所以自己琢磨了一下,写了一个简单的实现方法)
一、效果图:
二、主要的实现逻辑:
1、wxss页:通过弹性布局flex,将导航栏控制在页面底部;
2、js页:绑定事件,动态捕获点击元素的data-id,并根据捕获到的data-id,设置data里某个数据;
3、wxml页:调用js页面数据,动态设置对应元素的类名class。
写得好像有点难理解,其实就是先写好一个激活样式active,一个默认样式default,通过类选择器class='active’或者class='default’来控制样式。并且写死对应元素的data-id的值,但用户点击的时候,捕获到data-id的值,我们就知道用户点击的是哪一个了,这时候把它的类名class设置为active,其他的设置为default就能实现样式切换了。
三、具体代码:
1、wxml代码
<!--pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.wxml-->
<view class="nav-tabs">
<view class="{{options.A}}" data-id="A" bindtap="mySelected">
<view class="image-view"><image src="/images/tabBar-0.png" mode="widthFix"></image></view>
<view>考试记录</view>
</view>
<view class="{{options.B}}" data-id="B" bindtap="mySelected">
<view class="image-view"><image src="/images/tabBar-1.png" mode="widthFix"></image></view>
<view>错题集</view>
</view>
<view class="{{options.C}}" data-id="C" bindtap="mySelected">
<view class="image-view"><image src="/images/tabBar-2.png" mode="widthFix"></image></view>
<view>成绩增长</view>
</view>
</view>
2、wxss代码
/* pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.wxss */
page {
display: flex;
flex-direction: column;
height: 100%;
}
.nav-tabs {
width: 100%;
height: 120rpx;
display: flex;
position: fixed;
bottom: 0;
}
image{
padding-top: 10rpx;
width: 50rpx;
height: 50rpx;
}
.default {
line-height: 40rpx;
text-align: center;
flex: 1;
border-bottom: 1px solid #eee;
color: #000;
font-size: 28rpx;
}
.active {
line-height: 40rpx;
text-align: center;
color: #04DCA4;
flex: 1;
border: 1px solid #04DCA4;
font-weight: bold;
font-size: 28rpx;
background-color: grey;
border-radius: 5px;
}
3、js代码
// pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.js
Page({
data: {
// options用于设置控件的wxss样式
options: {
A: 'active',
B: 'default',
C: 'default',
},
},
onLoad: function (options) {
},
mySelected: function(e){
var d = e.currentTarget.dataset
var that = this;
console.log(d.id)
if(d.id=='A'){
that.setData({
options: {'A': 'active', 'B': 'default', 'C':'default'}
})
}
else if(d.id=='B'){
that.setData({
options: { 'A': 'default', 'B': 'active', 'C': 'default' }
})
}
else if(d.id=='C'){
that.setData({
options: { 'A': 'default', 'B': 'default', 'C': 'active' }
})
}
},
四、如果你缺少小图标icon,可以上阿里官方的图标库,免费下载
阿里图标库