微信小程序自定義導(dǎo)航欄兼容適配所有機(jī)型
目前小程序已在前端占了一席之地，最近公司項(xiàng)目上用的就是小程序開發(fā)，由于功能及頁面不是很多，所以直接原生開發(fā)，畢竟坑可能會(huì)少點(diǎn)，在開發(fā)過程中，小程序自帶導(dǎo)航欄和客戶的設(shè)計(jì)稿導(dǎo)航欄排在一起，感覺很別扭，因此要求去掉微信的自帶導(dǎo)航欄，微信提供了這方面的api，接下來我們就實(shí)操。
這是小程序官方文檔截圖，可以看到導(dǎo)航欄樣式支持兩種，默認(rèn)是帶導(dǎo)航欄，另外一種是自定義導(dǎo)航欄-custom，如果使用自定義導(dǎo)航欄，我們可以
全局配置
//app.json"window": {"navigationStyle": "custom"單頁面配置
//page.json"navigationStyle": "custom"效果對(duì)比
1.獲取導(dǎo)航欄高度及按鈕位置
微信提供了獲取導(dǎo)航欄高度的Api和膠囊按鈕位置的Api
// 系統(tǒng)信息const systemInfo = wx.getSystemInfoSync();// 膠囊按鈕位置信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect();在控制臺(tái)打印出這兩個(gè)Api返回結(jié)果
這里面我們只說幾個(gè)我們接下來用到的參數(shù)。
statusBarHeight// 狀態(tài)欄高度screenWidth// 膠囊的寬度top// 膠囊到頂部距離height// 膠囊的高度right// 膠囊距離右邊的距離通過這幾個(gè)參數(shù)，我們可以計(jì)算出狀態(tài)欄的高度，微信膠囊所占的高度（存在padding值，可以使元素和膠囊縱向居中）
首先在app.js中定義全局data-globalData
globalData: {navBarHeight: 0,// 導(dǎo)航欄高度menuBotton: 0,// 膠囊距底部間距（保持底部間距一致）menuRight: 0,// 膠囊距右方間距（方保持左、右間距一致）menuHeight: 0,// 膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）新建個(gè)方法
setNavBarInfo() {// 獲取系統(tǒng)信息const systemInfo = wx.getSystemInfoSync();// 膠囊按鈕位置信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;this.globalData.menuHeight = menuButtonInfo.right;在onLaunch中調(diào)用，因?yàn)槲疫@個(gè)項(xiàng)目是所有的導(dǎo)航都不用微信自帶的，所以在app.js
中調(diào)用及設(shè)置data。
onLaunch() {this.setNavBarInfo()到這里所需要用到的都已經(jīng)存了起來，頁面用法也比較簡(jiǎn)單，排除狀態(tài)欄的高度，設(shè)置導(dǎo)航欄的高度和膠囊高度保持，用flex布局。
2.頁面適配
首先page.js中定義變量
var app = getApp()Page({/** 頁面的初始數(shù)據(jù)/data: {navBarHeight: app.globalData.navBarHeight, //導(dǎo)航欄高度menuBotton: app.globalData.menuBotton, //導(dǎo)航欄距離頂部距離menuRight: app.globalData.menuRight, //導(dǎo)航欄距離右側(cè)距離menuHeight: app.globalData.menuHeight, //導(dǎo)航欄高度頁面使用
<view class="nav" style="height:{{navBarHeight}}px;"><view class="nav-main"><viewclass="capsule-box" style="style="height:{{menuHeight+menuBotton 2}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:0px;padding:0 {{menuRight}}px;"><slot>slot>view>view>view>wxss
/ 公共導(dǎo)航 */.nav {position: fixed;top: 0;left: 0;box-sizing: border-box;width: 100vw;z-index: 1000;.nav-main {width: 100%;height: 100%;box-sizing: border-box;position: relative;.nav .capsule-box {position: absolute;box-sizing: border-box;width: 100%;display: flex;align-items: center;最終效果
此種適配方案適應(yīng)所有手機(jī)，應(yīng)該說是最優(yōu)的選擇。
小程序怎么做如圖的頂部欄目啊
小程序是一種全新的應(yīng)用形態(tài)， 小程序平臺(tái)不需要下載安裝即可使用應(yīng)用的平臺(tái)， 小程序?qū)崿F(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在，隨時(shí)可用，但又無需安裝卸載。下面一起看一下安下小編給大家?guī)淼?小程序設(shè)計(jì)指南。【 小程序設(shè)計(jì)指南】概要基于 小程序輕快的特點(diǎn)，我們擬定了小程序界面設(shè)計(jì)指南和建議。設(shè)計(jì)指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在 生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗(yàn)，同時(shí)最大程度適應(yīng)和支持不同需求，實(shí)現(xiàn)用戶與小程序服務(wù)方的共贏。友好禮貌為了避免用戶在 中使用小程序服務(wù)時(shí)，注意力被周圍復(fù)雜環(huán)境干擾，小程序在設(shè)計(jì)時(shí)應(yīng)該注意減少無關(guān)的設(shè)計(jì)元素對(duì)用戶目標(biāo)的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶進(jìn)行操作。重點(diǎn)突出每個(gè)頁面都應(yīng)有明確的重點(diǎn)，以便于用戶每進(jìn)入一個(gè)新頁面的時(shí)候都能快速地理解頁面內(nèi)容，在確定了重點(diǎn)的前提下，應(yīng)盡量避免頁面上出現(xiàn)其他干擾項(xiàng)影響用戶的決策和操作。反例示意此頁面的主題是查詢，卻添加了諸多與查詢不相關(guān)的業(yè)務(wù)入口，與用戶的預(yù)期不符，易造成用戶的迷失。糾正示意去掉任何與用戶目標(biāo)不相關(guān)的內(nèi)容，明確頁面主題，在技術(shù)和頁面控件允許的前提下提供有助于用戶目標(biāo)的幫助內(nèi)容，比如最近搜索詞，常用搜索詞等。反例示意操作沒有主次，讓用戶無從選擇糾正示意首先要避免并列過多操作讓用戶選擇，在不得不并列多個(gè)操作時(shí)，需區(qū)分操作主次，減輕用戶的選擇難度。流程明確為了讓用戶順暢地使用頁面，在用戶進(jìn)行某一個(gè)操作流程時(shí)，應(yīng)避免出現(xiàn)用戶目標(biāo)流程之外的內(nèi)容而打斷用戶。反例示意用戶本打算進(jìn)行搜索，在進(jìn)入頁面時(shí)卻被突如其來的抽獎(jiǎng)彈窗所打斷；對(duì)于抽獎(jiǎng)沒有興趣的用戶是非常不友好的干擾；而即便有部分用戶確實(shí)被“誘人”的抽獎(jiǎng)活動(dòng)所吸引，離開主流程去抽獎(jiǎng)之后可能就遺忘了原本的目標(biāo)，進(jìn)而失去了對(duì)產(chǎn)品真正價(jià)值的利用和認(rèn)識(shí)。清晰明確一旦用戶進(jìn)入我們的小程序頁面，我們就有責(zé)任和義務(wù)清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全的愉悅的使用體驗(yàn)。導(dǎo)航明確，來去自如導(dǎo)航是確保用戶在網(wǎng)頁中瀏覽跳轉(zhuǎn)時(shí)不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶，我在哪，我可以去哪，如何回去等問題。首先在 系統(tǒng)內(nèi)的所有小程序的全部頁面，均會(huì)自帶 提供的導(dǎo)航欄，統(tǒng)一解決我在哪，如何回去的問題。在 層級(jí)導(dǎo)航保持體驗(yàn)一致，有助于用戶在 內(nèi)形成統(tǒng)一的體驗(yàn)和交互認(rèn)知，無需在各小程序和 切換中新增學(xué)習(xí)成本或改變使用習(xí)慣。 導(dǎo)航欄 導(dǎo)航欄，直接繼承于客戶端，除導(dǎo)航欄顏色之外，開發(fā)者無需亦不可對(duì)其中的內(nèi)容進(jìn)行自定義。但開發(fā)者需要規(guī)定小程序各個(gè)頁面的跳轉(zhuǎn)關(guān)系，讓導(dǎo)航系統(tǒng)能夠以合理的方式工作。 導(dǎo)航欄分為導(dǎo)航區(qū)域、標(biāo)題區(qū)域以及操作區(qū)域。其中導(dǎo)航區(qū)控制程序頁面進(jìn)程。目前導(dǎo)航欄分深淺兩種基本配色。導(dǎo)航區(qū)（iOS）導(dǎo)航區(qū)通常只有一個(gè)操作，即返回上一級(jí)界面。導(dǎo)航區(qū)（Android）同iOS一樣，導(dǎo)航區(qū)也只有一個(gè)返回上一級(jí)頁面的操作，而點(diǎn)擊安卓手機(jī)自帶的硬件返回鍵也起到相同作用。 導(dǎo)航欄自定義顏色規(guī)則（iOS和Android）小程序?qū)Ш綑谥С只镜谋尘邦伾远x功能，選擇的顏色需要在滿足可用性前提下，和諧搭配 提供的兩套主導(dǎo)航欄圖標(biāo)。建議參考以下選色效果：選色方案示例頁面內(nèi)導(dǎo)航開發(fā)者可根據(jù)自身功能設(shè)計(jì)需要在頁面內(nèi)添加自有導(dǎo)航。并保持不同頁面間導(dǎo)航一致。但是受限于手機(jī)屏幕尺寸的限制，小程序頁面的導(dǎo)航應(yīng)盡量簡(jiǎn)單，若僅為一般線性瀏覽的頁面建議僅使用 導(dǎo)航欄即可。開發(fā)者可選擇小程序頁面添加標(biāo)簽分頁（Tab）導(dǎo)航。標(biāo)簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過4項(xiàng)。一個(gè)頁面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁欄。其中小程序首頁可選擇 提供的原生底部標(biāo)簽分頁樣式，該樣式僅供小程序首頁使用。開發(fā)時(shí)可自定義圖標(biāo)樣式、標(biāo)簽文案以及文案顏色等，具體設(shè)置項(xiàng)可參考開發(fā)文檔。頂部標(biāo)簽分頁欄顏色可自定義。在自定義顏色選擇中，務(wù)必注意保持分頁欄標(biāo)簽的可用性、可視性和可操作性。減少等待，反饋及時(shí)頁面的過長(zhǎng)時(shí)間的等待會(huì)引起用戶的不良情緒，使用 小程序項(xiàng)目提供的技術(shù)已能很大程度縮短等待時(shí)間。即便如此，當(dāng)不可避免的出現(xiàn)了加載和等待的時(shí)候，需要予以及時(shí)的反饋以舒緩用戶等待的不良情緒。啟動(dòng)頁加載小程序啟動(dòng)頁是小程序在 內(nèi)容一定程度上展現(xiàn)品牌特征的頁面之一。本
京東店鋪裝修，導(dǎo)航欄中的hot動(dòng)態(tài)圖怎么用HTML代碼做上去的？求代碼
以上就是【看完后我驚呆了！微信小程序頂部導(dǎo)航欄仿京東(微信小程序頂部導(dǎo)航欄怎么做)】的全部?jī)?nèi)容。
評(píng)論