uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)
這是我目前發(fā)現(xiàn)較好的uni-app 自定義底部導(dǎo)航欄方法，其他方法的缺點(diǎn)主要是在切換時(shí)，要么會(huì)閃爍，要么會(huì)每點(diǎn)擊一下，都會(huì)請(qǐng)求一次數(shù)據(jù)。如果有其他更好的方法，歡迎評(píng)論留言，最近才開(kāi)始用uni-app寫(xiě)項(xiàng)目，之前只是看了下文檔。
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使用頻次較高，就設(shè)為全局變量了
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是為了關(guān)閉頁(yè)面切換動(dòng)畫(huà)效果，
<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;
}
到此這篇關(guān)于uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uni-app 底部導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS獲取scrollHeight問(wèn)題想到的標(biāo)準(zhǔn)問(wèn)題
如果沒(méi)有文檔聲明可以用 document.body.scrollHeight,如果有文檔聲明必須用 document.documentElement.scrollHeight關(guān)于這方面的東西2007-05-05
Javascript 靜態(tài)頁(yè)面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí)，客戶(hù)要求實(shí)現(xiàn)廣告隨機(jī)排序，而且要求在html頁(yè)面實(shí)現(xiàn)，也就是說(shuō)必須使用javascript來(lái)完成了。2010-11-11
點(diǎn)擊按鈕彈出模態(tài)框的一系列操作代碼實(shí)例
這篇文章主要介紹了js彈出模態(tài)框方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
javascript實(shí)現(xiàn)可改變滾動(dòng)方向的無(wú)縫滾動(dòng)實(shí)例
無(wú)縫滾動(dòng)在制作一些圖片展示的時(shí)候還是蠻有用的，下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動(dòng)方向的無(wú)縫滾動(dòng)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
js實(shí)現(xiàn)按鈕開(kāi)關(guān)單機(jī)下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)按鈕開(kāi)關(guān)單機(jī)下拉菜單效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Bootstrap Modal對(duì)話(huà)框如何在關(guān)閉時(shí)觸發(fā)事件
這篇文章主要為大家詳細(xì)介紹了Bootstrap Modal對(duì)話(huà)框如何在關(guān)閉時(shí)觸發(fā)事件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
實(shí)現(xiàn)js保留小數(shù)點(diǎn)后N位的代碼
最近在做項(xiàng)目的時(shí)候，遇到要保留小數(shù)點(diǎn)后N位的問(wèn)題，經(jīng)過(guò)一番思索，最終完成了，這里記錄一下，下次需要直接就能拉出來(lái)用了2014-11-11
解決iframe的frameborder在chrome/ff/ie下的差異
最近的項(xiàng)目中使用了動(dòng)態(tài)創(chuàng)建iframe的js方法，發(fā)現(xiàn)iframe.frameborder="0"在IE7下不管用，而chrome/ff都正常的，很是郁悶。2010-08-08
這篇文章主要介紹了ES6新特性之?dāng)?shù)組的擴(kuò)充,結(jié)合實(shí)例形式分析了ES6數(shù)組操作的常見(jiàn)方法與相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析(三)
本篇文章給大家分享cocos2dx骨骼動(dòng)畫(huà)Armature源碼剖析(三)，代碼附有注釋?zhuān)榻B的非常詳細(xì)，需要的朋友可以參考下2015-09-09