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

詳解小程序橫屏方案對比

 更新時間:2020年06月28日 14:06:12   作者:william  
這篇文章主要介紹了小程序橫屏方案對比,實現(xiàn)橫屏的方案也有多種,但是每種方案都有一定的缺陷,恰巧最近也在橫屏方案上踩了不少坑,本文就一起來介紹一下吧

前言

隨著小程序api開放的功能日漸增多,小程序可以做到的功能和展現(xiàn)形式也越來越多,其中橫屏的展現(xiàn)形式就是其中的一種,而實現(xiàn)橫屏的方案也有多種,但是每種方案都有一定的缺陷,恰巧最近也在橫屏方案上踩了不少坑,接下來就來和大家分享一下小程序的不同橫屏方案的優(yōu)劣(踩坑心得)

組件自帶橫屏方法

小程序中的媒體組件一般都會提供全屏的方法,而且全屏方法中會提供一個direction的全屏參數(shù),可以通過這全屏參數(shù)將小程序旋轉(zhuǎn)90度橫屏展示,這是小程序中最簡單的橫屏方法。

這個方法優(yōu)點在于調(diào)用的組件全屏方法做的橫屏,不需要考慮頭部導航欄的膠囊按鈕的顯示問題,媒體組件在做全屏顯示時,膠囊按鈕會自動隱藏不見,同時大多數(shù)媒體組件都已經(jīng)支持了同層渲染,可以通過z-index調(diào)整組件層級,因此用此法在橫屏布局時可以在媒體組件上覆蓋其他組件布局

缺點:這個方法的缺點也很明顯,就是只能使用媒體相關組件才能有橫屏的全屏,場景很單一,如果不是媒體組件或者不想全屏,那么對不起,此法不可用

計算加速度判斷橫屏

這個方法是之前有人發(fā)在微信社區(qū)里的一個方法,通過小程序提供的wx.onAccelerometerChange方法監(jiān)聽設備在x、y、z軸上的加速度,通過返回的重力加速度計算設備的旋轉(zhuǎn)角度,下面貼出代碼給大家參考:

// 0為豎屏,1為橫屏
 let lastState = 0;
 let lastTime = Date.now();
 
 wx.startAccelerometer();
 
 wx.onAccelerometerChange((res) => {
  const now = Date.now();
   
  // 500ms檢測一次
  if (now - lastTime < 500) {
   return;
  }
  lastTime = now;
 
  let nowState;
 
  // 57.3 = 180 / Math.PI
  const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;
  const Pitch = Math.atan2(res.y, res.z) * 57.3;
 
  // console.log('Roll: ' + Roll, 'Pitch: ' + Pitch)
 
  // 橫屏狀態(tài)
  if (Roll > 50) {
   if ((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {
    nowState = 1;
   }else {
    nowState = lastState;
   }
 
  }else if ((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {
   let absPitch = Math.abs(Pitch);
 
   // 如果手機平躺,保持原狀態(tài)不變,40容錯率
   if ((absPitch > 140 || absPitch < 40)) {
    nowState = lastState;
   }else if (Pitch < 0) {/*收集豎向正立的情況*/
    nowState = 0;
   }else {
    nowState = lastState;
   }
  }
  else {
   nowState = lastState;
  }
 
  // 狀態(tài)變化時,觸發(fā)
  if (nowState !== lastState) {
   lastState = nowState;
   if (nowState === 1) {
    console.log('change:橫屏');
   }else {
    console.log('change:豎屏');
   }
  }
 });

更多的實現(xiàn)細節(jié)可以前往社區(qū)帖子查看,這個方法個人實際嘗試過,確實可以判斷設備處在橫屏還是豎屏

優(yōu)點:這個方法的優(yōu)點在于可以監(jiān)聽到設備的橫豎屏情況,然后根據(jù)項目需要展示不同橫豎屏布局,自由度很高

缺點:這個方法的缺點在于在頁面內(nèi)容橫屏時無法使頭部導航欄的膠囊按鈕橫屏展示,因為頭部導航欄的膠囊按鈕始終是固定屏幕右上角不動的,這樣會使得橫屏效果有點奇怪,橫屏是導航欄固定在左邊是豎屏時的布局,除非橫屏的布局是媒體組件的全屏,這樣就能遮住膠囊按鈕,自己自定義一個頭部導航,這樣就不會顯得布局奇怪

pageOrientation

pageOrientation是小程序提供的配置屬性,可以設置當前頁面是橫屏展示、豎屏展示、或者自動旋轉(zhuǎn),同時提供一個onResize的監(jiān)聽方法,當屏幕發(fā)生旋轉(zhuǎn)時會觸發(fā)onResize的回調(diào),并且會在回調(diào)中返回當前是橫屏還是豎屏以及相應區(qū)域的大小。

優(yōu)點:配置即可,手機旋轉(zhuǎn)觸發(fā)監(jiān)聽事件,返回屏幕旋轉(zhuǎn)后的寬高和當前橫豎屏情況,橫屏時膠囊按鈕會自動旋轉(zhuǎn),這樣頁面布局就不會有上一個方法所提及的怪異布局

缺點:

  • 由于是配置形式,沒辦法主動調(diào)用,只能被動監(jiān)聽
  • 當用戶將手機允許旋轉(zhuǎn)關閉后,onResize的監(jiān)聽方法就不會觸發(fā)
  • 由于小程序大多數(shù)時候使用的是rpx的單位,是一個基于響應區(qū)域大小的動態(tài)計算的單位,當屏幕發(fā)生旋轉(zhuǎn)后,假設豎屏旋轉(zhuǎn)到橫屏,豎屏時響應區(qū)域為375 667,到了橫屏時響應區(qū)域為667 375,此時onResize回調(diào)還沒觸發(fā),此時的頁面布局是豎屏的布局,但是由于響應區(qū)域發(fā)生變化375 667到667 375,rpx就會重新計算,此時頁面的布局會突然變大,然后onResize回調(diào)觸發(fā)后才會變?yōu)闄M屏布局,會有布局閃現(xiàn)錯亂的情況
  • width:100%或者width:100vw這類的占滿全部的樣式也會出現(xiàn)問題,同樣假設從豎屏切換到橫屏,當豎屏切換的橫屏時,此時width:100%的樣式,計算100%的寬度還是豎屏時的375,不會立即切換到橫屏時的667,因此切換到橫屏時的一瞬間,能看到原來100%的樣式,此時并沒有占滿100%,閃了一下375之后,然后才會占滿,假設我們自定義的頂部標題欄,用了width:100%,那么我橫屏時就會發(fā)現(xiàn),標題欄寬度只有一半,然后才會占滿

橫屏時響應區(qū)域變化產(chǎn)生布局變化的解決辦法

這個解決辦法只能解決橫屏時由于響應區(qū)域變化導致rpx重新的計算渲染的問題,既然rpx會在響應區(qū)域變化時重新計算渲染,那我們最直接粗暴簡單的方法就是不使用動態(tài)計算的單位px,這樣就不會在橫屏時重新渲染計算,但是這樣也有一個問題,就是在不同屏幕的大小的手機下也沒法動態(tài)計算了

那有沒有其他的更好辦法呢?vmax、vmin這兩個單位應該平時用的不多,個人也很少用,如果不是這次寫小程序橫屏,也不會關注到它

vmin:取值是當前vw和vh中較小的值,vmax:取值是當前vw和vh中較大的值

在豎屏時100vmin=375px,到了橫屏時100vmin=375px,這樣就能保證在橫豎屏切換的時候內(nèi)容大小不變,在小程序中使用calc(vmin/7.5),假設大小為10px,那么css為calc(10vmin/7.5),如果你嫌這么寫麻煩,同時使用的是vs code,那么可以創(chuàng)建一個全局User Snippets:

"rpx to vmin" : {
 "prefix": "tovmin",
 "body": ["calc($0vmin / 7.5)"],
 "description": "rpx to vmin"
 }

這樣在寫css時直接寫tomin就會將calc($0vmin / 7.5)輸出

官方snippets創(chuàng)建步驟

總結(jié)

小程序中的橫屏方案總是有這樣或者那樣的問題,并沒有完美的解決方案,有時還是小程序自身原因?qū)е碌?,我們能做的只是尋找解決辦法或者換個交互設計,這篇文章的目的就是希望對大家在做橫屏方案時提供一點幫助,少踩坑,這是我的踩坑經(jīng)歷,提供給大家借鑒,同時也有我的一些解決辦法,如果大家有更好的方案,可以一起學習。

到此這篇關于詳解小程序橫屏方案對比的文章就介紹到這了,更多相關小程序橫屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論