您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何封裝vue.js移動端導(dǎo)航navigationbar,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
web app和移動端原生app的構(gòu)架方式不一樣的,頁面的切換是對整個頁面的重新渲染。所以我們每個頁面都有自己的導(dǎo)航條。
下面簡單封裝下導(dǎo)航條
html部分
此處寫的導(dǎo)航的三個部分,分別是左邊div、中間的title部分div、右邊div。代碼如下
<template> <header class="m-header" :class="{'is-bg-red':bgRed, 'is-fixed':fixed}"> <div class="leftItem"><slot name="left"></slot></div> <div class="m-header-title" v-text="title"></div> <div class="rightItem"><slot name="right"></slot></div> </header> </template>
js部分代碼
此處向父類暴露了3個屬性,分別是傳入title的字符串和背景是否為紅色,已經(jīng)是否固定在頂部(默認(rèn)是固定在頂部)。具體代碼如下
<script type="text/ecmascript-6"> export default{ props: { title: { type: String, default: '' }, bgRed: { type: Boolean, default: false }, fixed: { type: Boolean, default: true } } } </script>
stylus部分代碼如下
<style scoped lang="stylus" rel="stylesheet/stylus"> .m-header display flex flex-direction row align-items center height 64px background-color white border-bottom 1px solid #e5e5e5 .leftItem margin-top 24px width 60px height 40px a display block text-decoration none color #333 font-size 16px img padding 10px 10px width 24px height 24px .m-header-title width 100% height 44px margin-top 24px line-height 44px font-size $font-size-nav-title color $color-nav-item display flex justify-content center font-size 18px color #333 .rightItem margin-top 24px width 60px height 40px a display block text-decoration none color #333 font-size 16px img padding 9px 8px width 24px height 24px &.is-fixed position fixed left 0px right 0px top 0px z-index 9 &.is-bg-red background-color #ee424a .m-header-title color white .m-header-left color white .m-header-right color white </style>
封裝完畢后,我們就可以使用啦,具體使用方法如下
<template> <div> <m-header title="職位" :bgRed="isShowRefresh"> <a slot="left" v-show="false"> ![](../../assets/refresh-white-icon@2x.png) </a> <a slot="right"> ![](../../assets/home-filter@2x.png) </a> </m-header> </div> </template> <script type="text/ecmascript-6"> import MHeader from 'common/nav/navbar' export default{ data () { return { isShowRefresh: true } }, components: { MHeader } } </script>
運行效果圖如下
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何封裝vue.js移動端導(dǎo)航navigationbar”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。