談談面試時遇到的uniapp框架的問題?


1、我告訴面試官,我寫的是app項目,用的是uni-app框架,面試官反問我是H5?我說不是 ,就是app,面試官又說uniapp不就是H5,我當時還一愣一愣的,后來我查了一下,確實可以說uniapp是H5,雖然官網沒有這么介紹,但是開發的uniapp項目相當於是H5頁面,只是裝在了Android殼子中,其實開發的還是頁面。另外,uniapp是可以跨平台使用,可以發布在app平台、H5平台和小程序平台,可參考以下圖:

 

 

 2、請說一下在uniapp開發中下拉刷新、上拉加載的原理?

(1)下拉刷新:

        原理:大部分的下拉刷新控件,都是用contentInset實現的。默認情況下,如果一個UIScrollView的左上角在導航欄的正下方,那么它的contentInset是64,而contentOffset是-64。繼續下拉的話,contentOffset就會越來越小,如果上滑,contentOffset就會增大,直到左上角達到屏幕的左上角時,contentOffset剛好為0。

默認情況下,如果下拉一個UIScrollView,在松手之后,會彈回初始的位置(導航欄下方)。而大部分的下拉刷新控件,都是將自己放在UIScrollView的上方,起始y設置成負數,所以平時不會顯示出來,只有下拉的時候才會出現,放開又會彈回去。然后在loading的時候,臨時把contentInset增大,相當於把UIScrollView往下擠,於是下拉刷新的控件就會顯示出來,然后刷新完成之后,再把contentInset改回原來的值,實現回彈的效果。

  問題:采用下拉刷新獲取數據列表,請求完最后一頁的數據后,不小心又進行了一次下拉操作,相當於又重新請求了一次,為了避免這種重復請求的現象,有什么方法?

  答:可以通過uni.startPullDownRefresh(),在onLoad中(即頁面剛加載進來時)調用該API實現開始下拉功能;在下拉刷新函數中,調用后台接口獲取每一頁的數據,將每次獲取的數據列表累加起來,直到請求到最后一頁數據后,調用uni.stopPullDownRefresh(),關閉下拉刷新,這時,即便再次下拉,也不會請求到接口數據了。

(2)上拉加載:

  原理:

  • 滾定區域是給固定高度, 設置overflow-y:auto來實現
  • 觸發條件:可視高度 + 滾動高度 >= 實際高度
    • 可視高度:通過dom的offsetHeight獲取, 表示區域固定的高度; 但是更加推薦使用getBoundingClientRect()來獲取高度, 因為使用前者會引起瀏覽器回流, 造成一些性能問題
    • 滾動高度:滾動事件中通過e.target.scrollTop獲取, 表示滾動條距離頂部的px
    • 實際高度:通過dom的scrollHeight獲取, 表示區域內所有內容的高度(包括滾定距離), 也就是實際的高度

  問題與回答同上。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM