uni-app 自定义简单底部tab

达摩封臣 發表於 2021-1-8 14:44:00

<img src="https://img2020.cnblogs.com/blog/2237618/202101/2237618-20210108143949861-1868270668.png" alt="" loading="lazy">
项目地址：https://gitee.com/jielov/uni-app-tabbar
 
先创建三个页面分别为 home.vue ， classify.vue， my.vue 。以下为基础样式
<img src="https://img2020.cnblogs.com/blog/2237618/202101/2237618-20210108144027177-620826450.png" alt="" loading="lazy">
 
创建一个 base_tab 为主页面，在base_tab 引入先前创建好的三个页面，关于组件的引用可自行去官网查看
<div class="cnblogs_code">
<pre>//导入组件
import Home from '@/components/home'
import Classify from '@/components/classify'
import My from '@/pages/index/index'

export default {
components: {
 Home,
 Classify,
 My
}
}</pre>
</div>
导入组件之后，先让组件在页面上显示出来，然后在开始在页面布局
v-if 里的current 是在data里定义的，初始值为0 
v-if="current == 0" ，current 可以理解为id，根据id == 几来显示页面
当子页面在父页面显示出来后，开始定义底部tab样式
<div class="cnblogs_code">
<pre><view style="height: 90vh;">

<Home v-if="current == 0"></Home>
<Classify v-if="current == 1"></Classify>
<My v-if="current == 2"></My>

<view class="tab">
 
 <block v-for="(item,index) in tabbar" :key="index">
 <view class="tab_tiem" :class="" :data-index="index" @tap="tabSwitch">
 <view class="item_img">
 <image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
 </view>
 <view class="item_name">
 {{item.text}}
 </view>
 </view>
 </block>
</view>
</view></pre>
</div>
tab 显示的图标以三元运算来进行判断是否选中状态
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
</pre>
</div>
 @tap="tabSwitch" 点击事件
<div class="cnblogs_code">
<pre>export default {
methods: {
 tabSwitch(e) {
 console.log(e);
 let index = e.currentTarget.dataset.index
 this.current = index
 }
},
}</pre>
</div>
循环 tabbar 数据
<div class="cnblogs_code">
<pre>export default {
 data() {
 return {
 current: 0,
 tabbar: [{
 img: '../../static/tab/home.png',//未选中
 slectImg: '../../static/tab/home_select.png', //已选中
 text: '首页',
 },
 {
 img: '../../static/tab/classify.png',
 slectImg: '../../static/tab/classify_select.png',
 text: '分类',
 },
 {
 img: '../../static/tab/my.png',
 slectImg: '../../static/tab/my_select.png',
 text: '我的',
 }
 ],
 }
 },
}</pre>
</div>
最后css 样式
<div class="cnblogs_code">
<pre><style lang="scss">
.tab {
 width: 100%;
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: space-between;
 z-index: 1024;
 background-color: #FFFFFF;
 height: 100rpx;
 left: 0;
 bottom: 0;
 padding-bottom: env(safe-area-inset-bottom);
 border-top: 1rpx solid #888888;

 .tab_tiem {
 flex: 1;
 width: 25%;
 display: flex;
 align-items: center;
 flex-direction: column;
 justify-content: center;
 font-size: 24rpx;
 color: #666;
 height: 80rpx;
 }

 .item_img {
 padding-top: 4rpx;
 }

 .image {
 height: 30rpx;
 width: 30rpx;
 }

 .tab::before {
 color: red;
 }

 .item_name {
 font-weight: bold;
 transform: scale(0.8);
 transform-origin: center 100%;
 line-height: 30rpx;
 }

 .active {
 // color: var(--color) !important;
 color: red;
 }
}
</style></pre>
</div>
 

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

頁: [1]

琼殿技术论坛's Archiver

uni-app 自定义 简单 底部tab

uni-app 自定义简单底部tab