這篇文章主要為大家展示了“微信小程序系列之如何實(shí)現(xiàn)自定義頂部導(dǎo)航功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序系列之如何實(shí)現(xiàn)自定義頂部導(dǎo)航功能”這篇文章吧。

10多年的新城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整新城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“新城網(wǎng)站設(shè)計(jì)”,“新城網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

具備基礎(chǔ)

vue框架

mpvue框架

全局配置

?找到全局的app.json文件，在配置中添加如下內(nèi)容：

"navigationStyle": "custom"
"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black",
 "navigationStyle": "custom" // 這個(gè)配置
}

組件思維

?使用mpvue開發(fā)小程序，src目錄下默認(rèn)會(huì)生成一個(gè)components文件夾；
?由于自定義組件所有webview頁面都要使用，所以把它歸類為公共組件；
?可以在components文件夾下新建一個(gè)common文件夾，專門放置公共組件，如下：

├── src                    源碼目錄 
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          組件目錄
│  │  └── common           公共組件
          └── topBar.vue   頂部自定義導(dǎo)航復(fù)制代碼

組件內(nèi)容

?由于不同設(shè)備statusBarHeight值可能有差異，自定義組件的高度取決于statusBarHeight值；
?找到全局App.vue文件，在這里面執(zhí)行小程序的onLaunch生命周期（監(jiān)聽小程序初始化）；
?具體獲取方法如下：

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)

? 通過vuex存儲(chǔ)statusBarHeight值，不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex；
?.vue文件的html相關(guān)結(jié)構(gòu)如下：

<template>
 <div class="top-bar">
 <div class="bar" :>
  <span class="title">{{title}}</span>
  <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
  <image class="icon" :src="icon" />
  </button>
  <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
  <span v-else></span>
 </div>
 <p class="place-holder" :></p>
 </div>
</template>

?結(jié)構(gòu)分析如下，可看做兩部分，一部分是fixed定位在頂部的class="bar"的div;另一部分是class="place-holder"的p；
?之所以要放一個(gè)p標(biāo)簽，是因?yàn)椴挥妹看我雝opBar.vue時(shí)都要考慮class="bar"的div都會(huì)遮擋內(nèi)容區(qū)的問題；
?因此將p標(biāo)簽height:80rpx;加上padding-top的6px;正好等于class="bar"的div的高度；

 

 

?由于項(xiàng)目中左邊放置的是進(jìn)入個(gè)人中心的功能，所以左邊頭像必須使用button來出發(fā)獲取用戶信息的授權(quán)；
?同時(shí)需要考慮到左邊不是頭像的情況，這時(shí)就可以用到vue的props屬性，具體props值，看下面代碼，默認(rèn)是給向左的箭頭，表示返回上一頁；

props: {
 title: {
 type: String,
 required: true
 },
 icon: {
 type: String,
 default: require('@static/icon/icon_back.png')
 },
 way: {
 type: String,
 default: null
 }
}

?如果way啥也不傳則左側(cè)不顯示任何icon；
?如果way傳入的是進(jìn)入個(gè)人中心的路由，則走button結(jié)構(gòu)上面的事件；
?如果way傳入的是‘back'，則顯示返回的向左箭頭。

問題總結(jié)

?該公共topBar.vue組件對ipad不能有效適配；
?fixed定位在安卓手機(jī)上下拉刷新時(shí)，結(jié)構(gòu)會(huì)跟著下拉，例如本文的自定義導(dǎo)航，下拉刷新的時(shí)候?qū)Ш綍?huì)跟著下拉然后再fixed到頂部（開發(fā)者工具上沒問題，真機(jī)有問題）；

以上是“微信小程序系列之如何實(shí)現(xiàn)自定義頂部導(dǎo)航功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：微信小程序系列之如何實(shí)現(xiàn)自定義頂部導(dǎo)航功能
文章URL：http://www.chinadenli.net/article18/piihdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站排名、建站公司、電子商務(wù)、域名注冊、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)