欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序實現自定義導航欄適配完美版

 更新時間:2019年04月02日 09:10:27   作者:小灰oO  
這篇文章主要介紹了小程序實現自定義導航欄適配完美版,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

1、發(fā)現問題

小程序頁面自定義導航欄功能已經開放有些日子了(還不知道這個功能的可以先>>了解一下),這極大的提升了小程序開發(fā)的自由度,相信不少小伙伴已經使用過這個功能,同時也相信不少小伙伴在此功能開發(fā)過程中踩過同樣的一些坑:

  • 機型多如牛毛:自定義導航欄高度在不同機型始終無法達到視覺上的統(tǒng)一;
  • 調皮的膠囊按鈕:導航欄元素(文字,圖標等)怎么也對不齊那該死的膠囊按鈕;
  • 各種尺寸的全面屏,奇怪的劉海屏,簡直要抓狂。

同樣的,這些問題也是小灰經歷過的。但是小灰相信,辦法總比問題多,于是開始了自己的探究:

2、一探究竟

為了搞明白到底該怎么去適配,老規(guī)矩,我先翻了一波官方文檔,還別說,官方還真有這么一段介紹了相關細節(jié),>>詳情點擊:

從圖中分析,我們可以得到如下信息:

  • Android跟iOS有差異,表現在頂部到膠囊按鈕之間的距離差了6pt
  • 膠囊按鈕高度為32pt, iOS和Android一致

這。。。,好像并沒有什么L用?。??這僅僅是普通屏幕為參照的,ipx, 安卓全面屏完全沒介紹。
沉著冷靜,我們接著分析:

  • 膠囊按鈕到狀態(tài)欄下邊緣這塊距離,好像是固定的?
  • 安卓這個圖,好像有點奇怪?導航欄分為 狀態(tài)欄+標題欄?
  • 如果車兩個條件成立,那我們的問題是不是就解決了80%了?

那么我們來論證一下:

第一個問題:膠囊按鈕到狀態(tài)欄下邊緣的距離是不是固定的?

很簡單,我們寫一個狀態(tài)欄,通過wx.getSystemInfoSync().statusBarHeight設置高度

為了好測量,我們設置狀態(tài)欄背景色為深色

js代碼:

var sysinfo = wx.getSystemInfoSync();
this.setData({ 
 statusBarHeight:sysinfo.statusBarHeight 
})

wxml代碼:

<view class="status-bar" style="height:{{statusBarHeight}}px"></view>

wxss代碼:

.status-bar{
 background: rgb(141, 71, 71);
 }

效果圖(iPhone6):

效果圖(iPhoneX):

效果圖(安卓):

是不是有點眉目了?是的,從截圖可以看出,iOS是一致的,但是Android好像有所差別。

那究竟距離是多少?我們用神器(微信截圖)來量一量:

Android:

iOS:

可以看出,iOS膠囊按鈕與狀態(tài)欄之間距離為:6px, Android為8px,并且經過測量,iOS各機型,Android各機型結果一致(由于篇幅原因,就不一一展示截圖了,有興趣的可以自行測量)

第二個問題:導航欄分為 狀態(tài)欄+標題欄?

通過對第一個問題的論證,很明顯能看出來確實是這樣的。并且通過第一個問題的測量結果以及官方提供的數據,我們可以對標題欄高度進行計算:

  • 導航欄高度 = 膠囊按鈕高度 + 狀態(tài)欄到膠囊按鈕間距 * 2
  • Android導航欄高度 = 32px + 8px * 2 = 48px
  • iOS導航欄高度 = 32px + 6px * 2 = 44px

*注:由于膠囊按鈕是原生組件,為表現一直,其單位在個系統(tǒng)都為px,所以我們的自定義導航欄各個高度的單位都必需是px(切記不能用rpx),才能完美適配。

3、解決問題

通過上述分析,相信小伙伴們都能有一個解決問題的思路了,在上代碼之前,小灰再給大家畫一下重點:

  • 寫自定義導航組件的時候,需要將組件結構一分為二:狀態(tài)欄 + 標題欄
  • 狀態(tài)欄高度可通過wx.getSystemInfoSync().statusBarHeight獲取
  • 標題欄高度:安卓:48px,iOS:44px
  • 單位必需跟膠囊按鈕一致,用px

話不多說,上代碼(gitHub地址):
js:

Component({ 
 properties: { 
 background: {  
 type: String,  
 value: 'rgba(255, 255, 255, 1)' 
 }, 
 color: {  
 type: String,  
 value: 'rgba(0, 0, 0, 1)' 
 }, 
 titleText: {  
 type: String,  
 value: '導航欄' 
 }, 
 titleImg: {  
 type: String,  
 value: '' 
 }, 
 backIcon: {  
 type: String,  
 value: '' 
 }, 
 homeIcon: {  
 type: String,  
 value: '' 
 }, 
 fontSize: {  
 type: Number,  
 value: 16 
 }, 
 iconHeight: {  
 type: Number,  
 value: 19 
 }, 
 iconWidth: {  
 type:Number,  
 value: 58 
 } 
 }, 
attached: function(){ 
 var that = this; 
 that.setNavSize(); 
 that.setStyle(); 
}, 
 data: {
 }, 
methods: { 
// 通過獲取系統(tǒng)信息計算導航欄高度 
setNavSize: function() {  
var that = this  
 , sysinfo = wx.getSystemInfoSync()  
 , statusHeight = sysinfo.statusBarHeight  
 , isiOS = sysinfo.system.indexOf('iOS') > -1  
 , navHeight;  
if (!isiOS) {  
 navHeight = 48;  
 } else {  
 navHeight = 44;  
}  
that.setData({  
 status: statusHeight,  
 navHeight: navHeight  
 }) 
}, 
setStyle: function() {  
 var that = this  
 , containerStyle  
 , textStyle  
 , iconStyle;  
 containerStyle = [  
 'background:' + that.data.background  
 ].join(';');  
 textStyle = [  
 'color:' + that.data.color,  
 'font-size:' + that.data.fontSize + 'px'  
 ].join(';');  
 iconStyle = [  
 'width: ' + that.data.iconWidth + 'px',  
 'height: ' + that.data.iconHeight + 'px'  
 ].join(';');  
 that.setData({  
  containerStyle: containerStyle,  
  textStyle: textStyle,  
  iconStyle: iconStyle  
 }) }, 
 // 返回事件 
back: function(){  
 wx.navigateBack({  
 delta: 1  
 })  
 this.triggerEvent('back', {back: 1}) 
}, 
home: function() {  
 this.triggerEvent('home', {}); 
 } 
 }})

wxml:

<view class='nav' style='height: {{status + navHeight}}px'> 
 <view class='status' style='height: {{status}}px;{{containerStyle}}'></view>    <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'> <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>   <image src='{{backIcon}}'></image> 
  </view> 
 <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>  
 <image src='{{homeIcon}}'></image> 
 </view> [鏈接描述][10]
 <view class='nav-icon' wx:if="{{titleImg}}">  
 <image src='{{titleImg}}' style='{{iconStyle}}'></image> 
 </view>
  <view class='nav-title' wx:if="{{titleText && !titleImg}}">
  <text style='{{textStyle}}'>{{titleText}}</text>
  </view>
 </view>
 </view>

wxss:

.navbar{
 position: relative
}
.back-icon, .home-icon{
 width: 28px;
 height: 100%;
 position: absolute; 
 transform: translateY(-50%); 
 top: 50%; 
 display: flex;
 }
.back-icon{ 
 left: 16px;
}
.home-icon{ 
 left: 44px
}
.back-icon image{ 
 width: 28px; 
 height: 28px; 
 margin: auto;
}
.home-icon image{ 
 width: 20px; 
 height: 20px; 
 margin: auto;
}
.nav-title, .nav-icon{ 
 position: absolute; 
 transform: translate(-50%, -50%); 
 left: 50%; 
 top: 50%; 
 font-size: 0; 
 font-weight: bold;
}

運行效果圖:


文字標題:

圖片標題:

4、總結

經過小灰的一番論證以及實踐經驗,最終總結出以上最終解決方案,但希望對小伙伴們有所幫助,如果小伙伴們覺得有用,記得給顆star哦 --> 點我,后續(xù)還會更新其他組件。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • JavaScript中函數的防抖與節(jié)流詳解

    JavaScript中函數的防抖與節(jié)流詳解

    這篇文章主要為大家詳細介紹了JavaScript中函數的防抖與節(jié)流,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • js實現的萬能flv網頁播放器代碼

    js實現的萬能flv網頁播放器代碼

    這篇文章主要介紹了js實現的萬能flv網頁播放器代碼,以簡單示例形式分析了JavaScript使用swfobject.js實現在線播放flv視頻的相關技巧,需要的朋友可以參考下
    2016-04-04
  • moment.js使用方法總結(全網最全)

    moment.js使用方法總結(全網最全)

    日常開發(fā)中通常會對時間進行下面這幾個操作,比如獲取時間,設置時間,格式化時間,比較時間等等,下面這篇文章主要給大家介紹了關于moment.js使用方法的相關資料,需要的朋友可以參考下
    2024-03-03
  • JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法

    JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法

    這篇文章主要介紹了JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法,實例分析了encodeURI()和decodeURI()函數解析字符串的相關技巧,需要的朋友可以參考下
    2015-08-08
  • JS實現獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】

    JS實現獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】

    這篇文章主要介紹了JS實現獲取圖片大小和預覽的方法,結合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預覽等操作的相關實現技巧,需要的朋友可以參考下
    2017-04-04
  • 純javascript判斷查詢日期是否為有效日期

    純javascript判斷查詢日期是否為有效日期

    很多網站都涉及到輸入日期選項,如果客戶日期輸入錯誤,可能導入查詢不到甚至查詢到錯誤的信息,為了更好的滿足用戶需求,需要對日期進行校驗,下面給大家介紹使用純javascript如何判斷查詢日期是否為有效日期,需要的朋友可以參考下
    2015-08-08
  • webpack教程之webpack.config.js配置文件

    webpack教程之webpack.config.js配置文件

    本篇文章主要介紹了webpack教程之webpack.config.js配置文件 ,具有一定的參考價值,有興趣的可以了解一席
    2017-07-07
  • layui的表單驗證支持ajax判斷用戶名是否重復的實例

    layui的表單驗證支持ajax判斷用戶名是否重復的實例

    今天小編就為大家分享一篇layui的表單驗證支持ajax判斷用戶名是否重復的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS實現本地存儲信息的方法(基于localStorage與userData)

    JS實現本地存儲信息的方法(基于localStorage與userData)

    這篇文章主要介紹了JS實現本地存儲信息的方法,基于localStorage與userData實現本地存儲的功能,需要的朋友可以參考下
    2017-02-02
  • 解決微信內置瀏覽器返回上一頁強制刷新問題方法

    解決微信內置瀏覽器返回上一頁強制刷新問題方法

    微信內置瀏覽器在返回上一頁面,且上一頁面包含AJAX代碼時,頁面就會被強制刷新,極度影響用戶體驗。而我們想要的效果是:返回上一頁面時,頁面還停留在原來的狀態(tài),AJAX獲取到的數據還在,滾動條也在原來的位置。下面跟著小編一起來看下吧
    2017-02-02

最新評論