關于數據異步加載引起Iscroll.js布局出錯的解決方案

MonoLog 發布于2019-08-20 17:04 / 3277人閱讀

摘要：今天要說的就是用實現局部滾動出現頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全，拉動回彈后內容又顯示不全。原因數據異步加載，無法正確獲取頁面元素的真實高度。自定義方法請求成功切換頁面后刷新解決異步加載數據布局出錯或

相信對于前端攻城獅來說Iscroll.js,大家并不陌生，lite版本只有24kb。但可以解決

1、position:fixed在IOS端的兼容性問題

>移動端viewport可以理解為一個放大鏡，滑動頁面就相當于在移動這個放大鏡，頁面的位置并沒有變。
>position:fixed將元素固定在頁面某一位置，那么在滑動頁面時這個元素的位置也不需要變，至少IOS之前是這么做的。

2、各瀏覽器對滾動條樣式渲染不統一的問題
3、實現下拉刷新
4、局部滾動。
當然iscroll還可以做輪播圖，放大鏡等效果。

今天要說的就是用iscroll實現局部滾動出現頁面布局的問題。

問題：頁面底部多出一部分或是頁面顯示不全，拉動回彈后內容又顯示不全。
原因：數據異步加載，iscroll無法正確獲取頁面元素的真實高度。
解決方法：在頁面請求完數據后刷新iscroll。

//自定義方法：請求成功切換頁面后刷新Iscroll解決異步加載數據布局出錯
view: function($this, viewData) { 
    this._super($this, viewData);
    mobile.page.iscroll("#" + mobile.page.getCurrPage().attr("id") + " .hospitalIntroduceIscroll.pageIscroll").refresh();
}

或

function Refresh() {
    setTimeout(function () {
        myScroll.refresh();
    }, 1000);
}

云服務器 GPU云服務器 js獲取異步加載的數據格式 listview的異步加載異步加載js的方法 js異步加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83368.html

關于數據異步加載引起Iscroll.js布局出錯的解決方案

摘要：今天要說的就是用實現局部滾動出現頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全，拉動回彈后內容又顯示不全。原因數據異步加載，無法正確獲取頁面元素的真實高度。自定義方法請求成功切換頁面后刷新解決異步加載數據布局出錯或相信對于前端攻城獅來說Iscroll.js,大家并不陌生，lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動端vi...

sixleaves 2019-08-01 16:57 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0
如何用 js 獲取虛擬鍵盤高度？（適用所有平臺）

摘要：前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，沒有方案還聊個什么別急，別急，接下來我們一起來扒一扒關于軟鍵盤高度和的問題我們先來看一個短片認識一下這個問題問題描述當操作者進行輸入操作的時候，彈起的前言這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題瀏覽器偏偏沒有給出解決方案，what？沒有方案還聊個什么？別急，別急，接下來我們...

terro 2019-08-22 10:54 評論0 收藏0