如何在小程序中自定義單頁(yè)面-創(chuàng)新互聯(lián)

本篇文章為大家展示了如何在小程序中自定義單頁(yè)面，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

目前成都創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、焉耆網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

一、實(shí)現(xiàn)的前提

1、首先查看文檔，看文檔里關(guān)于自定義導(dǎo)航欄是怎么規(guī)定的，有哪些限制；還有小程序自定義導(dǎo)航欄全局配置和單頁(yè)面配置的微信版本和調(diào)試庫(kù)的最低支持版本。

2、在app.json window 增加 navigationStyle:custom ，頂部導(dǎo)航欄就會(huì)消失，只保留右上角膠囊狀的按鈕，如何修改膠囊的顏色呢;膠囊體目前只支持黑色和白色兩種顏色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、還要考慮加返回按鈕和返回首頁(yè)的按鈕，適配不同的機(jī)型

先說(shuō)下兩種配置方法：

①全局配置navigationStyle：

調(diào)試基礎(chǔ)庫(kù)>=1.9.0

微信客戶(hù)端>=6.6.0

app.json

{
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 },
 "window": {
  "navigationStyle": "custom"
 } 
}

②單頁(yè)面配置navigationStyle

調(diào)試基礎(chǔ)庫(kù)>=2.4.3

微信客戶(hù)端版本>=7.0.0

自定義的頁(yè)面.json

{
 "window": {
  "navigationStyle": "default"
 } 
}
{
 "navigationStyle": "custom",
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 }
}

兩者的區(qū)別就是，全局配置放在app.json文件里，單頁(yè)面配置放在自定義頁(yè)面配置文件里。

二、實(shí)現(xiàn)的步驟

以下說(shuō)下幾個(gè)要點(diǎn)：

1、自定義導(dǎo)航欄文本，是否顯示返回，是否顯示返回首頁(yè),導(dǎo)航欄高度

2、statusBarHeight，用來(lái)獲取手機(jī)狀態(tài)欄的高度，這個(gè)需要在全局app.js中的onLaunch，調(diào)用wx.getSystemInfo獲取，navigationBarHeight+默認(rèn)的高度，這個(gè)是設(shè)定整個(gè)導(dǎo)航欄的高度，

3、還有注意的，在寫(xiě)樣式距離和大小時(shí)建議都用px，因小程序右邊的膠囊也是用的px，不是rpx。

4、因?yàn)樽远x導(dǎo)航欄每個(gè)頁(yè)面都要寫(xiě)，所以把導(dǎo)航欄封裝了公共組件，這樣只需要在每個(gè)頁(yè)面引入即可。

如下是封裝的導(dǎo)航欄組件：

wxml

<view class="navbar" >
 <view ></view>
 <view class='title-container'>
  <view class='capsule' wx:if="{{ back || home }}">
   <view bindtap='back' wx:if="{{back}}">
    <image src='/images/back.png'></image>     
   </view>
   <view bindtap='backHome' wx:if="{{home}}">
    <image src='/images/home.png'></image>
   </view>
  </view>
  <view class='title'>{{text}}</view>
 </view>
</view>
<view ></view>

這里有個(gè)需注意的問(wèn)題，就是一般會(huì)出現(xiàn)自定義導(dǎo)航欄，下拉頁(yè)面，導(dǎo)航欄也隨著會(huì)下拉，這種問(wèn)題是因?yàn)樵O(shè)置fixed后頁(yè)面元素整體上移了navigationBarHeight，所以在此組件里設(shè)置一個(gè)空白view元素占用最上面的navigationBarHeight這塊高度

wxss

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
}
.title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
}
.capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
}
.capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
.capsule > view:nth-child(2) {
 border-left: 1px solid #fff; 
}
.capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}
.title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

js

const app = getApp()

Component({

 properties: {
  text: {
   type: String,
   value: 'Wechat'
  },
  back: {
   type: Boolean,
   value: false
  },
  home: {
   type: Boolean,
   value: false
  }
 },
 data: {
  statusBarHeight: app.globalData.statusBarHeight + 'px',
  navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },

 methods: {
  backHome: function () {
   let pages = getCurrentPages()
   wx.navigateBack({
    delta: pages.length
   })
  },
  back: function () {
   wx.navigateBack({
    delta: 1
   })
  }
 }
})

json

{
 "component": true,
 "usingComponents": {}
}

最終還需要考慮下版本兼容的問(wèn)題，畢竟還有一些用戶(hù)，微信版本并沒(méi)有更新到最新版本。

首先可以在app.js里面獲取下當(dāng)前用戶(hù)的微信版本，做下版本比較，如果小于這個(gè)版本，設(shè)置個(gè)全局變量，也可以在組件寫(xiě)個(gè)方法，在不同的頁(yè)面打開(kāi)顯示不同的頂部導(dǎo)航欄，或者可以控制是否顯示導(dǎo)航欄，這里就不詳細(xì)說(shuō)了。

親自試了下，在低于7.0版本的微信中，如果采用單頁(yè)面自定義導(dǎo)航欄，會(huì)出現(xiàn)兩個(gè)導(dǎo)航欄，這時(shí)候通過(guò)判斷版本號(hào)不要再渲染自定義的導(dǎo)航欄組件了，在頁(yè)面的配置文件里寫(xiě)上title名，還有相應(yīng)的背景色，這樣就會(huì)顯示自帶的導(dǎo)航欄了。

上述內(nèi)容就是如何在小程序中自定義單頁(yè)面，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：如何在小程序中自定義單頁(yè)面-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article28/ddogcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、做網(wǎng)站、ChatGPT、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

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