有幾天沒更新了，這幾天上海天氣比較熱，天氣一熱就懶得寫了。今天感覺還好，就寫下導航部分的封裝吧。
關于環境搭建和底部tabbar的封裝請參考前面的兩篇文章
web app和移動端原生app的構架方式不一樣的，頁面的切換是對整個頁面的重新渲染。所以我們每個頁面都有自己的導航條。
下面簡單封裝下導航條
html部分
此處寫的導航的三個部分，分別是左邊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的字符串和背景是否為紅色，已經是否固定在頂部(默認是固定在頂部)。具體代碼如下
<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">  </a> <a slot="right">  </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>運行效果圖如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
