uni-app 顶部tabbar切换

星记發表於 2020-12-15 14:56:00

完成样式
项目地址：https://gitee.com/jielov/uni-app-tabbar
<img src="https://img2020.cnblogs.com/blog/2237618/202012/2237618-20201215145515860-2099032386.png" alt="" loading="lazy">
顶部tabbar代码
 
<div class="cnblogs_code">
<pre>
<view class="uni_tab_bar">
 <view class="uni_swiper_tab order_top">
 <block v-for="(tabBar,index) in tabBars" :key="index">
 <view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)">
 {{tabBar.name}}
 <view class="swiper_tab_line">
 </view>
 </view>
 </block>
 </view>
 </view></pre>
</div>
使用v-for 循环 tabbars 来进行标题的加载 v-for="(tabBar,index) in tabBars" :key="index" 。
 :key="index" 使得在勾选复选框后不会不随这内容的变动而变动例如在勾选第一个后添加一个新的内容后后勾线后的复选框不会一直是第一个
 :class="{'active': tabIndex==index}" 根据index，动态切换css 样式，tabIndex为初始化第一个选择项，在data里面定义tabIndex: 0,tabBars循环数据，放在data里面。
<div class="cnblogs_code">
<pre>data(){
return{
 tabIndex: 0, //选中标签栏的序列
 tabBars: [
 {name: '全部',id: '0'},
 {name: '待服务',id: '1'},
 {name: '服务中',id: '2'},
 {name: '已完成',id: '3'},
 {name: '已取消',id: '4'},
 ],
}
}</pre>
</div>
 @tap="toggleTab(tabBar.id)" @tab为点击切换事件，放在methods里面。
<div class="cnblogs_code">
<pre>toggleTab(index) {
　　this.tabIndex = index;
},</pre>
</div>
 以下为tab内容区域，css样式在最后面哦~
<div class="cnblogs_code">
<pre><view class="order_centext">
　　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
　　　　<swiper-item v-for="(content,index) in tabBars" :key="index">
　　　　　　<view class="swiper_item">{{content.name}}</view>
　　　　</swiper-item>
　　</swiper>
</view></pre>
</div>
swiper为滑动切换内容，tabbar滑动切换稍微没那么流畅，有点卡顿。可以选择去掉滑动，只保留点击切换即可。
@change="tabChange" 滑动事件，同样也是放在methods里面
<div class="cnblogs_code">
<pre>//滑动切换swiper
tabChange(e) {
const tabIndex = e.detail.current
this.tabIndex = tabIndex
}</pre>
</div>
 css样式
<div class="cnblogs_code">
<pre>.order_top {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #FFFFFF;
}

.swiper_tab_list {
color: #888888;
font-weight: bold;
}

.uni_tab_bar .active {
color: #FEDE33;
margin-top: 17rpx;
background-color: #FFFFFF;
}

.active .swiper_tab_line {
border-bottom: 4rpx solid #FEDE33;
width: 50rpx;
margin: auto;
margin-top: 17rpx;
background-color: #0B9C13;
}

.uni_swiper_tab {
border-bottom: 2rpx solid #eeeeee;
margin-bottom: 15rpx;
}

.order_centext {
height: 800rpx;
position: fixed;
top: 160rpx;
left: 0;
right: 0;
bottom: 0;
background-color: #8A6DE9;
margin-left: 15rpx;
margin-right: 15rpx;
}</pre>
</div>

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：虚乄，转载请注明原文链接：https://www.cnblogs.com/lovejielive/p/14138611.html 
来源：https://www.cnblogs.com/lovejielive/p/14138611.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 顶部tabbar切换