成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實現(xiàn)uniapp微信小程序自定義導(dǎo)航欄

3403771864 / 1680人閱讀

       前言

　　世界之大無奇不有，當(dāng)客戶對于導(dǎo)航欄不滿時候，就需要我們自己去開發(fā)了。當(dāng)然uniapp也有很多自定義導(dǎo)航插件，但現(xiàn)在我們要自己寫。

　　首先，我們要知道有那幾部分。

1.png

　　可以看到在我們的，這個時候我們自定義的導(dǎo)航欄，需要做到標(biāo)題于膠囊水平對齊，那其實這個時候整個頭部其實主要又：。

       上圖中，微信小程序中，頭部導(dǎo)航欄其實受到右上角膠囊的限制比較大，也就需要我們做改進(jìn)，我們可以看到：狀態(tài)欄的高度+標(biāo)題欄的高度組成。

　　狀態(tài)欄的高度我們可以通過uni.getSystemInfoSync().statusBarHeight來獲取。

　　現(xiàn)在要如何獲取標(biāo)題欄？

　　如果想要定義標(biāo)題欄的高度，就要鎖定這個膠囊的位置，在小程序中我們可以使用wx.getMenuButtonBoundingClientRect()獲取關(guān)于膠囊的信息

2.png

　　獲取到的膠囊的top，left，right分別對應(yīng)膠囊的上邊界，左邊界，右邊界相對于屏幕左上角的起點的位置，現(xiàn)在=就來說說我們要怎么修改處理（膠囊上邊界距離頂部的距離 - 狀態(tài)欄的高度）*2+膠囊的高度，就是標(biāo)題欄的高度呢？然后再在標(biāo)題欄里面添加一個文本區(qū)讓他的高度等于膠囊的高度，實現(xiàn)flex布局的上下居中是不是就搞定了呢？

　　在使用uniapp中，要考慮到多端情況。

　　在使用uniapp獲取到的狀態(tài)欄在h5，小程序和app原生都是有效的，h5網(wǎng)頁中一般就可以直接采用瀏覽器內(nèi)核給我們內(nèi)置的網(wǎng)頁導(dǎo)航欄，就是一個頭部，沒有過多的要求，而且瀏覽器不同，給我們提供的頭部導(dǎo)航也不一樣。

　　而對于app端，我們沒有了像微信小程序中那種讓人心煩的膠囊之后，我們只需要知道狀態(tài)欄的高度，然后加上自己業(yè)務(wù)需求的標(biāo)題欄樣式和標(biāo)題欄高度就行啦。

　　所以我們在進(jìn)行自定義導(dǎo)航欄封裝的時候就要對代碼進(jìn)行條件編譯啦。那么我這里呢是把微信小程序做了多帶帶的處理，微信小程序之外的平臺看作是統(tǒng)一狀態(tài)。

　　獻(xiàn)上源碼：

　　首先我們把獲取設(shè)備信息的代碼封裝到一個統(tǒng)一的js文件里面，這樣方便我們在組件中獲取也方便我們在頁面中獲取。

3.png　

　/**
　　* 此js文件管理關(guān)于當(dāng)前設(shè)備的機(jī)型系統(tǒng)信息
　　*/
　　const systemInfo = function() {
　　/****************** 所有平臺共有的系統(tǒng)信息 ********************/
　　// 設(shè)備系統(tǒng)信息
　　let systemInfomations = uni.getSystemInfoSync()
　　// 機(jī)型適配比例系數(shù)
　　let scaleFactor = 750 / systemInfomations.windowWidth
　　// 當(dāng)前機(jī)型-屏幕高度
　　let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
　　// 當(dāng)前機(jī)型-屏幕寬度
　　let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
　　// 狀態(tài)欄高度
　　let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
　　// 導(dǎo)航欄高度 注意：此導(dǎo)航欄高度只針對微信小程序有效 其他平臺如自定義導(dǎo)航欄請使用：狀態(tài)欄高度+自定義文本高度
　　let navHeight = 0 //rpx
　　// console.log(windowHeight,'哈哈哈哈哈');
　　/****************** 微信小程序頭部膠囊信息 ********************/
　　// #ifdef MP-WEIXIN
　　const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
　　// 膠囊高度
　　let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
　　// 膠囊寬度
　　let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
　　// 膠囊上邊界的坐標(biāo)
　　let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
　　// 膠囊右邊界的坐標(biāo)
　　let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
　　// 膠囊下邊界的坐標(biāo)
　　let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
　　// 膠囊左邊界的坐標(biāo)
　　let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
　　// 微信小程序中導(dǎo)航欄高度 = 膠囊高度 + (頂部距離 - 狀態(tài)欄高度) * 2
　　navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
　　// #endif
　　// #ifdef MP-WEIXIN
　　return {
　　scaleFactor,
　　windowHeight,
　　windowWidth,
　　statusBarHeight,
　　menuButtonHeight,
　　menuButtonWidth,
　　menuButtonTop,
　　menuButtonRight,
　　menuButtonBottom,
　　menuButtonLeft,
　　navHeight
　　}
　　// #endif
　　// #ifndef MP-WEIXIN
　　return {
　　scaleFactor,
　　windowHeight,
　　windowWidth,
　　statusBarHeight
　　}
　　// #endif
　　}
　　export {
　　systemInfo
　　}

　　然后我們定義一個導(dǎo)航欄組件

4.png　

　/*
　　*注意：
　　*1、在傳入寬度或者高度時，如果是Number數(shù)據(jù)，傳入的值為px大小,無需帶單位，組件自動計算
　　*2、在使用此導(dǎo)航欄時，建議傳入UI規(guī)定的導(dǎo)航欄高度，此高度只針對除微信小程序的其他平臺有效，微信小程序的導(dǎo)航欄高度，組件自計算
　　*/
　　<template>
　　<view>
　　<!--微信小程序頭部導(dǎo)航欄-->
　　<!--#ifdef MP-WEIXIN-->
　　<view class="wx-head-mod":style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor}">
　　<view class="wx-head-mod-nav":style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
　　<view class="wx-head-mod-nav-content"
　　:style="{height:customHeight+'rpx',justifyContent:textAlign==='center'?'center':'left'}">
　　<!--文本區(qū)-->
　　<view class="wx-head-mod-nav-content-mian"
　　:style="{width:navTextWidth,lineHeight:customHeight+'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor}">
　　{{textContent}}
　　</view>
　　<!--返回按鈕-->
　　<view class="wx-head-mod-nav-content-back":style="{display:isBackShow?'flex':'none'}"
　　 click="backEvent">
　　<view class="wx-head-mod-nav-content-back-img"
　　:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
　　<image:src="backImageUrl"mode=""style="width:100%;height:100%;"></image>
　　</view>
　　</view>
　　</view>
　　</view>
　　</view>
　　<!--#endif-->
　　<!--除微信小程序之外的其他設(shè)備-->
　　<!--#ifndef MP-WEIXIN-->
　　<view class="other-head-mod"
　　:style="{height:navHeightValue*scaleFactor+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
　　<view class="other-head-mod-mian"
　　:style="{height:navHeightValue*scaleFactor+'rpx',justifyContent:textAlign==='center'?'center':'left'}">
　　<!--返回按鈕-->
　　<view class="other-head-mod-mian-back"v-show="isBackShow" click="backEvent">
　　<view class="other-head-mod-mian-back-img"
　　:style="{width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'}">
　　<image:src="backImageUrl"mode=""style="width:100%;height:100%;"></image>
　　</view>
　　</view>
　　<!--標(biāo)題-->
　　<view class="other-head-mod-mian-title":style="{width:windowWidth-184+'rpx',lineHeight:navHeightValue*scaleFactor+'rpx',
　　paddingLeft:textPaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
　　fontWeight:fontWeight,color:titleColor}">
　　{{textContent}}
　　</view>
　　</view>
　　</view>
　　<!--#endif-->
　　</view>
　　</template>
　　<script>
　　const app=getApp()
　　import{systemInfo}from' /common/system-info.js'
　　export default{
　　name:"HeadView",
　　props:{
　　//文本區(qū)域位置left：左center：中
　　textAlign:{
　　type:String,
　　default:'center'
　　},
　　//文本區(qū)內(nèi)容
　　textContent:{
　　type:String,
　　default:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈就啊哈哈好借好還'
　　},
　　//文本區(qū)離左邊的距離
　　textPaddingLeft:{
　　type:Number,
　　default:16
　　},
　　//是否需要返回按鈕
　　isBackShow:{
　　type:Boolean,
　　default:true
　　},
　　//文本區(qū)字體大小
　　fontSize:{
　　type:Number,
　　default:20//px
　　},
　　//文本區(qū)字體粗細(xì)
　　fontWeight:{
　　type:Number,
　　default:700
　　},
　　//文本區(qū)返回按鈕圖片寬
　　backImageWidth:{
　　type:Number,
　　default:12//px
　　},
　　//文本區(qū)返回按鈕圖片高
　　backImageHeight:{
　　type:Number,
　　default:24//px
　　},
　　//返回按鈕圖標(biāo)路徑
　　backImageUrl:{
　　type:String,
　　default:'/static/backImage.svg'
　　},
　　//導(dǎo)航欄整體背景顏色
　　navBackgroundColor:{
　　type:String,
　　default:'#2476F9'
　　},
　　//標(biāo)題字體顏色
　　titleColor:{
　　type:String,
　　default:'#ffffff',
　　},
　　/********h5端，app端需要傳入自定義導(dǎo)航欄高度*******/
　　navHeightValue:{
　　type:Number,
　　default:44//px
　　}
　　},
　　computed:{
　　//文本區(qū)寬度
　　navTextWidth(){
　　if(this.textAlign==='center'){
　　return(this.windowWidth-(this.windowWidth-this.menubarLeft)*2)+'rpx'
　　}else{
　　return this.menubarLeft+'rpx'
　　}
　　},
　　//文本區(qū)paddingLeft
　　textPaddingleft(){
　　if(this.textAlign==='center'){
　　return'0'
　　}else{
　　return this.textPaddingLeft+'rpx'
　　}
　　}
　　},
　　data(){
　　return{
　　statusBarHeight:app.globalData.statusBarHeight,//狀態(tài)欄高度
　　navHeight:app.globalData.navHeight,//頭部導(dǎo)航欄總體高度
　　navigationBarHeight:app.globalData.navigationBarHeight,//導(dǎo)航欄高度
　　customHeight:app.globalData.customHeight,//膠囊高度
　　scaleFactor:app.globalData.scaleFactor,//比例系數(shù)
　　menubarLeft:app.globalData.menubarLeft,//膠囊定位的左邊left
　　windowWidth:app.globalData.windowWidth*app.globalData.scaleFactor
　　};
　　},
　　methods:{
　　backEvent(){
　　uni.navigateBack({
　　delta:1
　　})
　　}
　　},
　　created(){
　　/*獲取設(shè)備信息*/
　　const SystemInfomations=systemInfo()
　　/*通用平臺*/
　　this.statusBarHeight=SystemInfomations.statusBarHeight//狀態(tài)欄高度
　　this.scaleFactor=SystemInfomations.scaleFactor//比例系數(shù)
　　this.windowWidth=SystemInfomations.windowWidth//當(dāng)前設(shè)備的屏幕寬度
　　/*微信小程序平臺*/
　　//#ifdef MP-WEIXIN
　　this.navHeight=SystemInfomations.navHeight+SystemInfomations.statusBarHeight//頭部導(dǎo)航欄總高度
　　this.navigationBarHeight=SystemInfomations.navHeight//頭部導(dǎo)航欄高度
　　this.customHeight=SystemInfomations.menuButtonHeight//膠囊高度
　　this.menubarLeft=SystemInfomations.menuButtonLeft//膠囊左邊界距離左上角的距離
　　//#endif
　　}
　　}
　　</script>
　　<style>
　　/*#ifdef MP-WEIXIN*/
　　.wx-head-mod{
　　box-sizing:border-box;
　　width:100%;
　　position:fixed;
　　top:0;
　　left:0;
　　}
　　.wx-head-mod-nav{
　　box-sizing:border-box;
　　width:100%;
　　position:absolute;
　　left:0;
　　display:flex;
　　justify-content:center;
　　align-items:center;
　　}
　　.wx-head-mod-nav-content{
　　box-sizing:border-box;
　　width:100%;
　　display:flex;
　　justify-content:left;
　　align-items:center;
　　position:relative;
　　}
　　/*文本區(qū)*/
　　.wx-head-mod-nav-content-mian{
　　box-sizing:border-box;
　　height:100%;
　　white-space:nowrap;
　　text-overflow:ellipsis;
　　overflow:hidden;
　　}
　　/*返回按鈕*/
　　.wx-head-mod-nav-content-back{
　　box-sizing:border-box;
　　width:60rpx;
　　height:100%;
　　/*background-color:aqua;*/
　　position:absolute;
　　top:0;
　　left:32rpx;
　　display:flex;
　　align-items:center;
　　justify-content:left;
　　}
　　.wx-head-mod-nav-content-back-img{
　　box-sizing:border-box;
　　}
　　/*#endif*/
　　/*#ifndef MP-WEIXIN*/
　　.other-head-mod{
　　box-sizing:border-box;
　　width:100%;
　　position:fixed;
　　top:0;
　　left:0;
　　}
　　.other-head-mod-mian{
　　box-sizing:border-box;
　　width:100%;
　　display:flex;
　　align-items:center;
　　justify-content:left;
　　position:absolute;
　　left:0;
　　bottom:0;
　　}
　　/*返回按鈕*/
　　.other-head-mod-mian-back{
　　box-sizing:border-box;
　　height:100%;
　　width:60rpx;
　　position:absolute;
　　left:32rpx;
　　top:0;
　　display:flex;
　　align-items:center;
　　}
　　/*標(biāo)題*/
　　.other-head-mod-mian-title{
　　box-sizing:border-box;
　　height:100%;
　　white-space:nowrap;
　　text-overflow:ellipsis;
　　overflow:hidden;
　　}
　　/*#endif*/
　　</style>

　　組件使用：

　　引入組件：

　　import HeadNav from' /components/HeadNav.vue'

　　組冊組件：

　　components:{
　　HeadNav
　　},
　　&lt;template&gt;
　　&lt;view class="content"&gt;
　　&lt;head-nav&gt;&lt;/head-nav&gt;
　　&lt;view class="content-main"&gt;&lt;/view&gt;
　　&lt;/view&gt;
　　&lt;/template&gt;

　　效果圖：

　　微信小程序：

5.png

　　h5:

6.png

　　app：

7.jpg

　　在項目里面沒有針對h5時候需要導(dǎo)航欄做特別的限制，如果實際開發(fā)中在h5端不需要此導(dǎo)航欄，請在模版上面針對h5頁面加入條件編譯即可。

       歡迎大家繼續(xù)學(xué)習(xí)，關(guān)注后續(xù)更多精彩內(nèi)容。



文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128381.html

相關(guān)文章

  • Java 初學(xué)者做的第一個微信小程序總結(jié)--關(guān)于Java基礎(chǔ)

    摘要：官方資料微信公眾平臺注冊小程序。官網(wǎng)開發(fā)文檔社區(qū)開發(fā)工具部署微信小程序微信小程序本身不需要部署，在微信開發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年，目前已經(jīng)工作了2年，因為自學(xué)，基礎(chǔ)差，所以打算年末總結(jié)一下常見的基礎(chǔ)知識和面試點； 也可以通過獨立做一個項目整合自己工作期間學(xué)習(xí)的知識，加深印象。 但是想著回家或是平時手機(jī)用的多，做一款A(yù)PP和小程序很方便查看。 項目展示 本...

    mudiyouyou 評論0 收藏0

  • 小程序/uniapp支持的css選擇器一覽

    摘要：本次測試主要參考文檔為選擇器參考手冊主要是安卓微信小程序的選擇器兼容入坑小程序過程中看到微信對支持的選擇器的描述只有六個分別是但是看到給寫的花里胡哨的的庫還有各種花里胡哨的小程序并且還表明支持之前各種無的庫所以我覺得事情并沒有這么簡單趁著元 本次測試主要參考文檔為w3school CSS 選擇器參考手冊 (主要是安卓/ios/微信小程序的css選擇器兼容) 入坑uniapp/小程序過...

    MockingBird 評論0 收藏0

  • uniapp table 組件

    摘要：最近在搗鼓項目，恰好用到組件，之前寫了個，后面一直都想寫一個像樣的，可以分享給別人用的組件。自己的水平一般，開發(fā)出來的組件可能代碼不咋地，還望路過大神斧正。 uniapp是2019年非常的火爆的一個Dcloud開發(fā)跨平臺前端工具，支持ios android wap，小程序，除了android有點卡外，其他暫時沒有發(fā)現(xiàn)什么瑕疵。 最近在搗鼓uniapp項目，恰好用到table組件，之前...

    Vultr 評論0 收藏0

  • 微信小程序 — 速學(xué)速查筆記

    摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉(zhuǎn)成是否自動補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關(guān)鍵字客服編譯方式小程序配置項目路由設(shè)置第一項為首頁窗 1. 配置 配置全解析 project.config.json ( 項目配置文件 ) { // 文件描述 description: 項目...

    baukh789 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<