摘要:今天要說的就是用實(shí)現(xiàn)局部滾動(dòng)出現(xiàn)頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全,拉動(dòng)回彈后內(nèi)容又顯示不全。原因數(shù)據(jù)異步加載,無法正確獲取頁面元素的真實(shí)高度。自定義方法請求成功切換頁面后刷新解決異步加載數(shù)據(jù)布局出錯(cuò)或
相信對于前端攻城獅來說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決
1、position:fixed在IOS端的兼容性問題
>移動(dòng)端viewport可以理解為一個(gè)放大鏡,滑動(dòng)頁面就相當(dāng)于在移動(dòng)這個(gè)放大鏡,頁面的位置并沒有變。 >position:fixed將元素固定在頁面某一位置,那么在滑動(dòng)頁面時(shí)這個(gè)元素的位置也不需要變,至少IOS之前是這么做的。
2、各瀏覽器對滾動(dòng)條樣式渲染不統(tǒng)一的問題
3、實(shí)現(xiàn)下拉刷新
4、局部滾動(dòng)。
當(dāng)然iscroll還可以做輪播圖,放大鏡等效果。
今天要說的就是用iscroll實(shí)現(xiàn)局部滾動(dòng)出現(xiàn)頁面布局的問題。
問題:頁面底部多出一部分或是頁面顯示不全,拉動(dòng)回彈后內(nèi)容又顯示不全。
原因:數(shù)據(jù)異步加載,iscroll無法正確獲取頁面元素的真實(shí)高度。
解決方法:在頁面請求完數(shù)據(jù)后刷新iscroll。
//自定義方法:請求成功切換頁面后刷新Iscroll解決異步加載數(shù)據(jù)布局出錯(cuò) 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); }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83368.html
摘要:今天要說的就是用實(shí)現(xiàn)局部滾動(dòng)出現(xiàn)頁面布局的問題。問題頁面底部多出一部分或是頁面顯示不全,拉動(dòng)回彈后內(nèi)容又顯示不全。原因數(shù)據(jù)異步加載,無法正確獲取頁面元素的真實(shí)高度。自定義方法請求成功切換頁面后刷新解決異步加載數(shù)據(jù)布局出錯(cuò)或 相信對于前端攻城獅來說Iscroll.js,大家并不陌生,lite版本只有24kb。但可以解決 1、position:fixed在IOS端的兼容性問題 >移動(dòng)端vi...
摘要:隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié),必然不可能涉及方方面面,但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...
摘要:隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動(dòng)端問題對移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié),必然不可能涉及方方面面,但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動(dòng)端問題對移動(dòng)Web開發(fā)需要注意...
摘要:前言這是一個(gè)存在很久的歷史問題了,對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案,沒有方案還聊個(gè)什么別急,別急,接下來我們一起來扒一扒關(guān)于軟鍵盤高度和的問題我們先來看一個(gè)短片認(rèn)識(shí)一下這個(gè)問題問題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候,彈起的 前言 這是一個(gè)存在很久的歷史問題了,對于這樣一個(gè)具有普遍性的問題瀏覽器偏偏沒有給出解決方案,what?沒有方案還聊個(gè)什么? 別急,別急,接下來我們...
閱讀 2550·2021-11-24 10:20
閱讀 2398·2021-09-10 10:51
閱讀 3384·2021-09-06 15:02
閱讀 3122·2019-08-30 15:55
閱讀 2845·2019-08-29 18:34
閱讀 3086·2019-08-29 12:14
閱讀 1224·2019-08-26 13:53
閱讀 2936·2019-08-26 13:43