1、移動端上拉加載
網上有很多成熟的插件,比如iscroll。在這里介紹一下用jquery和js寫的上拉加載方法。使用原生的去寫上拉加載更多需要三個高度去做對比,以新聞類列表舉例,首先需要整個dom的高度,其次需要移動設備窗口的高度,最后需要滾動條距離頂部的高度,移動設備的高度加上滾動條距離頂部的高度等於dom的高度時,表示已經滑動到底部,進而加載下一頁,監聽滾動條的滑動事件使用scroll()方法。當然這里也可以進行無感知加載,就是當移動設備高度和滾動條高度相加和dom高度接近時就加載下一頁的數據。
2、移動端列表查看詳情
以新聞列表為例,加載到第十頁查看一條新聞的詳情,查看詳情后需要使用手機的物理回退按鍵回退到列表頁,並且是當前點擊的位置,因為移動端瀏覽器是在一個窗口下加載頁面的,只要url地址發生變化,整個頁面就會重新加載。如何解決這個問題呢,在這里提供兩個思路:一、使用錨點定位和控制div顯示隱藏屬性。列表頁是一個div用於顯示列表,詳情頁是一個div用來展示詳情,使用window.onhashchange方法用來監聽錨點的變化,一個新聞對應一個id,通過監聽錨點變化獲取#號后面的新聞id,控制列表div隱藏和詳情div的顯示,進而展示詳情,回退的時候同樣使用window.onhashchange來監聽,控制列表div的顯示和詳情div的隱藏。二、使用localStrrage或者sessionStorage。在這里詳情頁是一個單獨的頁面,從列表頁到詳情頁的時候,需要先把當前新聞的dom內容、page頁碼和滾動條距離頂部的距離保存,保存后再跳轉到詳情頁,從詳情頁返回列表頁的時候,雖然url地址發生了變化,按道理來說應該重新初始化列表頁面,在這里加上一個判斷,判斷是否存在頁面存儲的localStorage或者sessionStorage,如果存在就使用緩存的數據直接追加到頁面上,包括滾動條的高度和page頁碼,如果不存在就重新初始化整個列表頁面,這樣就做到了查看詳情,返回還是在原來的位置。
3、移動端查看原文使用iframe嵌套第三方頁面
以新聞列表為例,在新聞詳情頁面查看原文鏈接的時候,如果使用iframe引入第三方的url地址正常是可以訪問的,但是如果有些網站加了同源限制,禁止iframe引入自己的網站頁面,這時候我們應該怎么辦呢?
我們使用a標簽直接跳轉第三方頁面。首先在查看新聞詳情的時候把已有的dom、page和scrollTop值用localStorage存儲起來,在這里為什么不用sessionStorage呢?因為當使用a標簽跳轉的時候,在移動端頁面都是在一個窗口,兩個url地址不是同源的話,之前的sessionStorage會消失,所以這里使用localStorage。查看原文后,手機物理回退到詳情頁的時候首先判斷是否含有localStorage,有就直接展示緩存的數據,沒有就重新加載列表,在這里展示完緩存數據后就要把localStorage清除掉,如果不清除的話,你刷新頁面加載的還是你緩存的數據。接着判斷url里面是否含有錨點,如果有代表是查看的詳情頁,取出id,隱藏列表頁div,展示詳情頁div。
以上是在實際做移動端web項目時遇到的問題以及解決辦法,在這里只提供了大致的思路,如果有不明白的或者有疑問的歡迎留言~,當然如果有更好的解決辦法的話,歡迎指正!