uni-app 自定義底部導航欄的實現(xiàn)
更新時間：2020年12月11日 14:14:11 作者：Joanna同學
這篇文章主要介紹了uni-app 自定義底部導航欄的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
這是我目前發(fā)現(xiàn)較好的uni-app 自定義底部導航欄方法，其他方法的缺點主要是在切換時，要么會閃爍，要么會每點擊一下，都會請求一次數(shù)據(jù)。如果有其他更好的方法，歡迎評論留言，最近才開始用uni-app寫項目，之前只是看了下文檔。
1. tabbar 組件
<template>
<view class="tabbar-container">
<view
:style="{ color: currentIndex == index ? '#007EFF' : '#333333' }"
v-for="(item, index) in tabbarList"
:key="index"
style="flex: 1"
@click="switchTab(index)"
>
<view :class="'iconfont ' + item.icon" />
<view class="title">{{ item.title }}</view>
</view>
</view>
</template>
mounted(){
let dom = uni.createSelectorQuery().select('.tabbar-container')
dom.boundingClientRect(e => {
// tabbarHeight使用頻次較高，就設為全局變量了
getApp().globalData.tabbarHeight = e.height
}).exec()
}
<style scoped lang="scss">
.iconfont {
font-size: 18px;
}
.tabbar-container {
display: flex;
justify-content: space-evenly;
text-align: center;
padding: 10px 0;
background-color: #fff;
box-shadow: 0 -1.5px 3px #eee;
z-index: 999;
.title {
font-size: 12px;
}
}
</style>
2. 引入
這里使用的是swiper，duration為0是為了關閉頁面切換動畫效果，
<template>
<view :style="'height: calc(100vh - ' + tabbarHeight + 'px)'">
<tab-bar
:currentIndex="currentIndex"
class="tabbar-container"
@getCurrentIndex="getCurrentIndex"
/>
<swiper duration="0" disable-touch :current="currentIndex" style="height: 100%">
<swiper-item>
<scroll-view scroll-y style="height: 100%">
<home />
</scroll-view>
</swiper-item>
<swiper-item>
<todo-page />
</swiper-item>
<swiper-item>
<launch-task />
</swiper-item>
<swiper-item>
<my-page />
</swiper-item>
</swiper>
</view>
</template>
mounted() {
this.tabbarHeight = getApp().globalData.tabbarHeight
},
getCurrentIndex(e) {
this.currentIndex = e;
}
到此這篇關于uni-app 自定義底部導航欄的實現(xiàn)的文章就介紹到這了,更多相關uni-app 底部導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于three.js中多線程的使用及性能測試的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個基于原型繼承的具有給定名稱的新類，下面這篇文章主要給大家介紹了關于JavaScript和TypeScript中class的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2018-04-04
HTML<video>元素用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內(nèi)的視頻播放,你也可以將<video>標簽用于音頻內(nèi)容,在前端中實現(xiàn)音頻和視頻播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript來控制這些媒體元素的播放、暫停、音量等屬性2023-10-10
javascript 方法一些使用方法,注意看下他的函數(shù)。2009-05-05
javascript實現(xiàn)文本框標簽驗證的實例代碼
這篇文章主要介紹了javascript實現(xiàn)文本框標簽驗證的實例代碼,需要的朋友可以參考下2018-10-10
最近一直在開發(fā)低代碼平臺的東西,由于項目里面東西有點多,取值或調(diào)用起來比較麻煩,使用本文就將使用Proxy編寫一個取值限制器,需要的小伙伴可以參考下2023-12-12
這篇文章主要介紹了uniapp 微信默認地圖選點功能實現(xiàn),本文通過實例代碼效果圖展示給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
javascript實現(xiàn)根據(jù)漢字獲取簡拼
這里給大家分享一個JavaScript實現(xiàn)的根據(jù)漢字可以自動轉換簡拼代碼，有需要的朋友可以參考一下，并非本人原創(chuàng)來自網(wǎng)絡。2016-09-09
這篇文章主要介紹了Postman的下載及安裝教程詳解,今天給大家介紹的這款網(wǎng)頁調(diào)試工具不僅可以調(diào)試簡單的css、html、腳本等簡單的網(wǎng)頁基本信息，它還可以發(fā)送幾乎所有類型的HTTP請求！需要的朋友可以參考下2018-10-10
今天小編就為大家分享一篇對layui中表單元素的使用詳解。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08