1. 程式人生 > >[重磅] 讓HTML5達到原生的體驗 系列之二 列表流暢滾動

[重磅] 讓HTML5達到原生的體驗 系列之二 列表流暢滾動

上一篇文章後,我們繼續來探討HTML5的應用體驗優化。

本次探討的話題是列表如何在Android手機上流暢滾動。

App的頂部一般有titlebar,下面是list。

常見的一個需求是要在list滾動時,titlebar不動。
這個簡單的需求,實現起來其實並不簡單。

在普通web上的做法是使用div的滾動條,把list放到div裡。
但是很不幸的是,div滾動條在Android上非常非常卡,滾動完全無法商用。

還有一種做法是把titlebar使用fix來固頂。
但此時手機瀏覽器的滾動條會通到頂部,當titlebar的右側出現滾動條時,看起來非常怪異。
還有一個副作用是滾動太快時,titlebar的div會下來一下又彈上去。


也有人說使用iframe,但是手機上的iframe問題非常多,很多手機不支援iframe,還有些手機的iframe裡只能執行部分js,這個坑填不起。

想要解決這個問題其實也不難,還是使用plus.webview,把titlebar的HTML裝載到另一個webview裡,這樣list頁面的滾動條直接使用瀏覽器的滾動條而不是div滾動條,這樣就可以得到一個流暢的列表滑動體驗。
具體有2種做法,
- 1、在main頁面裡create一個list頁面,蓋在main的上面,擺好位置。
- 2、在list頁面裡create一個titlebar頁面,蓋在list的上面,擺好位置。
此時一般把list的body的margin-top設為titlebar頁面的高度。


以下為示例程式碼。
方式1,在listmain頁面裡create一個listcontend頁面,蓋在main的上面,擺好位置。
document.addEventListener("plusready",plusready,false);
function plusready () {
plus.key.addEventListener("backbutton",function(){
    plus.webview.currentWebview().opened()[0].close(); //按back鍵時把listcontend窗體關掉
    plus.webview.currentWebview().close();//按back鍵時把本窗體關掉
},false);
if (plus.webview.getWebviewById("listcontent")) {
    console.log("該webview已經存在,不重複建立");
}
else{
    plus.webview.open("listcontent.html","listcontent",{top:"44px"});//建立名為listcontent的webview,裝載listcontent.html的資料
}
}



方式2,在list頁面裡create一個titlebar頁面,蓋在list的上面,擺好位置。
document.addEventListener("plusready",plusready,false);
function plusready () {
plus.key.addEventListener("backbutton",function(){
    plus.webview.currentWebview().opened()[0].close(); //按back鍵時把titlebar窗體關掉
    plus.webview.currentWebview().close();//按back鍵時把本窗體關掉
},false);
if (plus.webview.getWebviewById("titlebar")) {
    console.log("該webview已經存在,不重複建立");
}
else{
    plus.webview.open("titlebar.html","titlebar",{height:"44px",scrollIndicator:"none"});//建立名為titlebar的webview,裝載titlebar.html的資料,並且設定這個webview不出現滾動條
}
}



方式1和2相比,各有優劣。
如果list內容是聯網取得,載入較慢,則方式1的使用者體驗稍好。
點選前一頁內容時,現把titlebar部分快速移入,然後在下面顯示一個正在載入的字樣,同時開始載入listcontent的內容,載入完畢後蓋住正在載入的字樣。
但這種方式也有一個壞處就是從listmain到listcontent需要多次頁面間傳遞引數。

相關推薦

[重磅] HTML5達到原生體驗 系列 列表流暢滾動

繼上一篇文章後,我們繼續來探討HTML5的應用體驗優化。 本次探討的話題是列表如何在Android手機上流暢滾動。 App的頂部一般有titlebar,下面是list。 常見的一個需求是要在list滾動時,titlebar不動。這個簡單的需求,實現起來其實並不簡單。在普通

提升HTML5的性能體驗系列五 webview啟動速度優化及事件順序解析

執行時間 很快 runt 代碼 模式 本地 技術 apk loaded webview加載時有5個事件。觸發順序為loading、titleUpdate、rendering、rendered、loaded。webview開始載入頁面時觸發loading,載入過程中如果&am

原生架構系列微服務

本系列旨在揭示現代軟體行業的關鍵主題——雲原生應用程式。這篇文章涉及微服務、容器和無伺服器應用程式。在這裡,我們將討論這些技術的實際優點和缺點。 微服務 微服務架構作為構建現代軟體應用程式的強大方法而享有盛譽。那麼什麼是微服務?微服務可以簡單地描述為,將軟體應用程式所需的功能分離為多個獨

提升HTML5的效能體驗系列之一 避免切頁白屏

提升HTML5的效能體驗系列之一 避免切頁白屏 白屏 切換頁面 效能 轉場 提升HTML5的效能體驗系列文章目錄導航: - [提升HTML5的效能體驗系列之一 避免切頁白屏] - 提升HTML5的效能體驗系列之二 列表流暢滑動 - 提升HTML5的效能體驗系列之三 流暢下拉重新整理 - 提升

開發者愛上安全測試”系列“原始碼安全測試”——開發者

原始碼安全測試不再是新鮮話題,在很多的企業已經開展了相關工作,對於已經開展此專案工作的企業來說,我想問的問題則是“在你的原始碼安全測試工作中所面臨的最大阻力是什麼?” 這個問題不同的企業可能有不同的答案,且各有各的道理。 其實,據我總結來看,很多的阻力表象最終都可以歸結為“開發人員不配合”的問題。那為什

開發者愛上安全測試”系列“源碼安全測試”——開發者

常見 開發部 使用範圍 難了 安全性 幫助 完全 也會 協商 源代碼安全測試不再是新鮮話題,在很多的企業已經開展了相關工作,對於已經開展此項目工作的企業來說,我想問的問題則是“在你的源代碼安全測試工作中所面臨的最大阻力是什麽?” 這個問題不同的企業可能有不同的答案,且各有各

HTML 提升HTML5的效能體驗系列 列表流暢滑動

今天發現專案有一個頁面滑動效果在iOS(iPhone6s&iPhoneSE)上十分順暢,到安卓手機(三星新款手機,效能較高)上就很卡頓,百思不得其解。看了一下,意識到可能是因為div滑動而不是body滑動造成的卡頓。檢查了CSS檔案body { backgro

【只怕沒有幾個人能說清楚】系列:Unity中的特殊文件夾

物體 avi ebp time 編輯模式 tro hive 預覽 打包 參考:http://www.manew.com/thread-99292-1-1.html 1. 隱藏文件夾 以.開頭的文件夾會被忽略。在這種文件夾中的資源不會被導入,腳本不會被編譯。也不會出現

【Unity Shaders】ShadowGun系列——霧和體積光

依靠 action 圖形學 取值 線性 數學 viewer https 是否 寫在前面體積光,這個名稱是God Rays的中文翻譯,感覺不是非常形象。God Rays事實上是Crepuscular rays在圖形學中的說法,而Crepuscular rays的意思是雲隙光

【iOS與EV3混合機器人編程系列】工欲善其事,必先利其器(準備篇)

style 混合 版權 相同 開發 code 操作系統 圖形 ipa 在上一篇文章中,我們論述了iOS與EV3結合後機器人開發的無限可能。那麽,大家要不要一起來Hacking一把呢?為了能夠完整地完畢我接下來我講的項目。我們須要做下面準備:1、一臺Mac執行MAC OS

C++語言筆記系列十——模版

輸出 類模板 pos 有一個 class 初始 個數 創建對象 example 1.隨意輸入兩個數x和y,輸出最大值max。 int max(int x, int y) {return x>y?x:y;} 2.函數模版 (1)用一種或者多

Python零基礎學習系列--Python介紹及環境搭建

url 軟件包 三方庫 簡單的 lin 文件的 span 高級程序設計 擴展 1-1、Python簡介:  Python是一種解釋型、面向對象、動態數據類型的高級程序設計語言。Python由Guido van Rossum於1989年底發明,第一個公開發行版發行於1991年

緩存系列:CDN與其他層面緩存

級別 spl pecl apache 分布式緩存 -o 真實ip har 分享 緩存系列之二:CDN與其他層面緩存 一:內容分發網絡(Content Delivery Network),通過將服務內容分發至全網加速節點,利用全球調度系統使用戶能夠就近獲取,有效降低訪問延遲,

數據庫面試系列:視圖

名稱 獨立 建立 數據庫 有用 圖的定義 適合 場景 多個 視圖的定義:視圖是一個或者多個基本表(或者視圖)導出的表。 視圖是一張虛表,視圖的數據並不實際存儲 視圖的優點: 1.視圖可以簡化用戶的操作 2.視圖可以讓用戶從多個角度來看待同一數據 3.視圖提供一定的數據邏輯獨

.Neter玩轉Linux系列:Linux下的文件目錄及文件目錄的權限

pac linux 在那 用戶 目錄結構 重要 bsp 樹狀 hub 一、Linux下的文件目錄 簡介:linux的文件系統是采用級層式的樹狀目錄結構,在此 結構中的最上層是根目錄“/”,然後在此目錄下再創建 其他的目錄。深刻理解linux文件目錄是

Java並發編程系列十八:CompletionService

xtend cts edate strong ext [] com 喚醒 render CompletionService簡介 CompletionService與ExecutorService類似都可以用來執行線程池的任務,ExecutorService繼承了Execut

Web API系列WebApi基礎框架搭建

相關 框架搭建 導入 沒有 pos 創建 div 程序 傻瓜式 本文主要介紹如何搭建一個WebApi的項目.關於如何搭建WebApi的方式一共有兩種: 一、通過vs直接新建一個WebApi的項目,步驟如下: 第一步: 新建一個空的Web應用程序,可以理解為作為WebApi的

CAN總線學習系列——CAN總線與RS485的比較

smb 可靠性 bus targe 接口 blog 情況 並不是 control CAN總線學習系列之二——CAN總線與RS485的比較 上 一節介紹了一下CAN總線的基本知識,那麽有人會問,現在的總線格式很多,CAN相對於其他的總線有什麽特點啊?這個問題

從產品展示頁面談談Hybris系列: DTO, Converter和Populator

ext 存儲 resource tar adl 裏的 resolve 個數 lis 文章作者:張健(Zhang Jonathan) 上一篇文章 從產品展示頁面談談Hybris的特有概念和設計結構 我們講解了Hybris一些特有的概念以及大體架構,並且介紹了Facade層裏是

Https系列:https的SSL證書在服務器端的部署,基於tomcat,spring boot

onf 基於 分享 height 轉化 自簽名 size class ont 一:本文的主要內容介紹 CA證書的下載及相應文件的介紹 CA證書在tomcat的部署 CA證書在spring boot的部署 自簽名證書的部署 二:一些內容的回顧 在Https系列之一中已介