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

詳解微信小程序調起鍵盤性能優(yōu)化

 更新時間:2018年07月24日 11:45:31   作者:MeloGuo  
這篇文章主要介紹了詳解微信小程序調起鍵盤性能優(yōu)化,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

在小程序中,我們經常有調起鍵盤的操作場景,但是在不同的場景下解決方案不盡相同,還是需要具體問題具體分析。

需求分析

最近在項目中有一個需求,是從列表頁點擊評論按鈕進入詳情頁時,在加載完頁面后自動調起鍵盤進入評論狀態(tài)。從需求來看,我們應該在onReady函數中調起鍵盤,因為onReady函數是在頁面初次渲染完成時被調用。但是在實踐中我們發(fā)現,對于一些配置不好的手機,其加載頁面速度較慢,在onReady函數調用時頁面并沒有渲染完畢,就會導致placeholder和input組件位置錯亂的現象。其本質原因是,onReady生命周期函數并不能在調用時承若已經將頁面渲染完成了。(盡管文檔中描述是已經完成了。)

之前的操作是在onReady生命周期函數中調起鍵盤。

this.setData({ focus: true })

發(fā)現這個問題后做了相應的延遲處理

setTimeout(() => {
 this.setData({ focus: true })
}, 300)

但這是治標不治本的方法,手機性能好的用戶會無謂的等待300毫秒,而手機性能很差的用戶等待300毫秒也不一定就能解決這個問題。

解決思路

那么既然小程序并沒有提供給我們一個理想的渲染結束后的回調函數,那么我們就換個思路: 使用短輪詢來處理,當頁面渲染完成后才調起鍵盤的操作。

既然要使用短輪詢,那么我們去輪詢什么呢?什么標志代表著頁面渲染完成了呢?在這里,我是使用 wx.createSelectorQuery() 方法,它會返回一個SelectorQuery對象實例,在這個實例上調用select方法選擇我想要去輪詢的節(jié)點,在回調函數中判斷參數是否為 null 。如果返回了監(jiān)控的節(jié)點信息,那么說明已經渲染完成。這時就可以進行鍵盤調起操作了。

let timer = setInterval(() => {
 wx.createSelectorQuery().select('#comment-section').boundingClientRect(rect => {
 if (rect !== null && timer !== null) {
  clearInterval(timer)
  timer = null
  this.setData({ focus: true })
 }
 }).exec()
}, 50)

在此之上,如果我們只粗暴的讓 focustrue 并不是個明智的做法。

在調起鍵盤時默認頁面會上推,如果在評論很少的情況下這樣的體驗并不好。所以需要判斷一個高度,超過這個值就上推,沒超過就不上推。這個值視實際情況而定。 上推的操作是由input組件的 adjust-position 屬性決定,為true則上推,否則則不上推。這時回調返回的參數中的節(jié)點信息就可以派上用場了。

// 在this.setData({ focus: true })前對節(jié)點高度進行判斷
if (rect.height < 500) this.setData({ push: false })
else this.setData({ push: true })

onBlur函數問題

在實際的操作中,我們發(fā)現在鍵盤被調起后會有概又自動收回。經過排查發(fā)現時onBlur函數的問題,在onBlur函數中,我們手動的設置 focusfalse ,但其實并不需要這一步操作,反而帶來了副作用。在我們去除了這部分代碼后,鍵盤自動收起的問題得到了解決。

封裝起來

雖然我們完成了這次任務的需求,但是顯而易見的,這樣的任務在未來肯定還會再次出現。所以機智的我們應該趕快把整套流程封裝起來,以便下次直接調用。

那么這時我們使用的方式就是這樣的:

const Util = require("xxx") // 引入封裝的庫

/**
 * 生命周期函數--監(jiān)聽頁面初次渲染完成
 */
onReady: function () {
 Util.onTotalReady('#comment-section', 50, rect => {
 if (rect.bottom < 500) this.setData({ push: false })
 else this.setData({ push: true }}
 this.setData({ focus: true })
 })
}

小結

在解決鍵盤調起的這個過程中我們可以看出微信小程序開發(fā)流程的簡陋,這個問題的出現本質上是小程序提供給我們的生命周期函數的不夠準確。否則在頁面渲染完成的情況下我怎么會拿不到節(jié)點信息呢?像react中的componentWillMount生命周期函數中就不會出現這樣的問題,所以希望小程序能再變強大一些,也讓我們少寫一點這種hack代碼。

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

相關文章

  • javascript常見操作匯總

    javascript常見操作匯總

    這篇文章主要介紹了javascript常見操作,有針對字符串、時間、表單等的操作,以及驗證、收藏、隨機數等其他常見技巧,需要的朋友可以參考下
    2014-09-09
  • 小程序跨頁面交互的作用與方法詳解

    小程序跨頁面交互的作用與方法詳解

    這篇文章主要介紹了小程序跨頁面交互的作用與方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • javascript 精確獲取樣式屬性(下)

    javascript 精確獲取樣式屬性(下)

    繼續(xù)上一部分,我們要看一下顏色?;鸷孟癫还苋叨欢紩D變?yōu)閞gb格式,不過我們通常比較習慣的是hex格式。這就用到以下兩函數。
    2010-01-01
  • JS修改地址欄參數實例代碼

    JS修改地址欄參數實例代碼

    本文給大家介紹js修改地址欄參數的實例代碼,并給大家附上用JS動態(tài)改變地址欄內容 window.location.href window.location.hash的方法,比較實用,需要的朋友參考下吧
    2016-06-06
  • js實現表單項的全選、反選及刪除操作示例

    js實現表單項的全選、反選及刪除操作示例

    這篇文章主要介紹了js實現表單項的全選、反選及刪除操作,結合實例形式分析了基于dedecms后臺使用js實現表單項的全選、反選及刪除相關操作技巧,需要的朋友可以參考下
    2020-06-06
  • JS學習筆記之數組去重實現方法小結

    JS學習筆記之數組去重實現方法小結

    這篇文章主要介紹了JS學習筆記之數組去重實現方法,結合實例形式總結分析了javascript數組去重的5種常見實現方法及相關操作技巧,需要的朋友可以參考下
    2019-05-05
  • 解決layui富文本編輯器圖片上傳無法回顯的問題

    解決layui富文本編輯器圖片上傳無法回顯的問題

    今天小編就為大家分享一篇解決layui富文本編輯器圖片上傳無法回顯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • javascript遞歸回溯法解八皇后問題

    javascript遞歸回溯法解八皇后問題

    網上看到許多關于八皇后算法的文章,很少能看到使用javascript來實現的,今天就給大家使用javascript來解決下這個問題,有需要的小伙伴可以參考下。
    2015-04-04
  • Javascript 阻止瀏覽器默認操作的實現代碼

    Javascript 阻止瀏覽器默認操作的實現代碼

    在瀏覽器事件中,會觸發(fā)一些默認動作,比如:點擊一個鏈接時,執(zhí)行完捕獲/冒泡動作后,會觸發(fā)鏈接的默認事件:跳轉到指定鏈接地址。
    2009-09-09
  • js 輸入框 正則表達式(菜鳥必看教程)

    js 輸入框 正則表達式(菜鳥必看教程)

    下面小編就為大家?guī)硪黄猨s輸入框使用正則表達式校驗輸入內容的實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02

最新評論