微信小程序系列之自定義頂部導(dǎo)航功能
具備基礎(chǔ)
vue框架:vue官方文檔
mpvue框架:mpvue官方文檔
全局配置
•找到全局的app.json文件,在配置中添加如下內(nèi)容:
"navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black", "navigationStyle": "custom" // 這個(gè)配置 }
組件思維
•使用mpvue開(kāi)發(fā)小程序,src目錄下默認(rèn)會(huì)生成一個(gè)components文件夾;
•由于自定義組件所有webview頁(yè)面都要使用,所以把它歸類為公共組件;
•可以在components文件夾下新建一個(gè)common文件夾,專門(mén)放置公共組件,如下:
├── src 源碼目錄
│ ├── main.js 入口js文件
│ ├── app.json 全局配置
│ ├── components 組件目錄
│ │ └── common 公共組件
└── topBar.vue 頂部自定義導(dǎo)航復(fù)制代碼
組件內(nèi)容
•由于不同設(shè)備statusBarHeight值可能有差異,自定義組件的高度取決于statusBarHeight值;
•找到全局App.vue文件,在這里面執(zhí)行小程序的onLaunch生命周期(監(jiān)聽(tīng)小程序初始化);
•具體獲取方法如下:
const that = this let systemInfo = wx.getSystemInfoSync() that.setBarHeight(systemInfo.statusBarHeight)
• 通過(guò)vuex存儲(chǔ)statusBarHeight值,不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex;
•.vue文件的html相關(guān)結(jié)構(gòu)如下:
<template> <div class="top-bar"> <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'"> <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" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></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ū)的問(wèn)題;
•因此將p標(biāo)簽height:80rpx;加上padding-top的6px;正好等于class="bar"的div的高度;
•由于項(xiàng)目中左邊放置的是進(jìn)入個(gè)人中心的功能,所以左邊頭像必須使用button來(lái)出發(fā)獲取用戶信息的授權(quán);
•同時(shí)需要考慮到左邊不是頭像的情況,這時(shí)就可以用到vue的props屬性,具體props值,看下面代碼,默認(rèn)是給向左的箭頭,表示返回上一頁(yè);
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',則顯示返回的向左箭頭。
問(wèn)題總結(jié)
•該公共topBar.vue組件對(duì)ipad不能有效適配;
•fixed定位在安卓手機(jī)上下拉刷新時(shí),結(jié)構(gòu)會(huì)跟著下拉,例如本文的自定義導(dǎo)航,下拉刷新的時(shí)候?qū)Ш綍?huì)跟著下拉然后再fixed到頂部(開(kāi)發(fā)者工具上沒(méi)問(wèn)題,真機(jī)有問(wèn)題);
以上所述是小編給大家介紹的微信小程序系列之自定義頂部導(dǎo)航功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問(wèn)題
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序自定義導(dǎo)航隱藏和顯示功能
- 微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型(附完整案例)
- 微信小程序自定義頭部導(dǎo)航欄(組件化)
- uniapp微信小程序底部動(dòng)態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
- 微信小程序自定義底部導(dǎo)航帶跳轉(zhuǎn)功能
- 微信小程序自定義導(dǎo)航欄實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄
- 微信小程序自定義導(dǎo)航的方法
相關(guān)文章
js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見(jiàn)用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03用js一次改變多個(gè)input的readonly屬性值的方法
這篇文章主要介紹了用js一次改變多個(gè)input的readonly屬性值的方法,需要的朋友可以參考下2014-06-06對(duì)象特征檢測(cè)法判斷瀏覽器對(duì)javascript對(duì)象的支持
就是將需要檢測(cè)的方法/對(duì)象作為if語(yǔ)句的判斷條件,具體做法如下2009-07-07JavaScript實(shí)現(xiàn)QQ聊天室功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天室功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序?qū)㈨?yè)面按鈕懸浮固定在底部的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10javascript實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面右下角提示信息框的方法和示例代碼,有需要的小伙伴可以參考下。2015-07-07js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)的制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07