• <acronym id="eyrpt"></acronym>
    <track id="eyrpt"></track>
    <p id="eyrpt"></p>

      <table id="eyrpt"><ruby id="eyrpt"></ruby></table>
      <table id="eyrpt"></table>

    1. 當前位置:首頁 > 短網址資訊 > 正文內容

      FT12短網址教你如何記錄閱讀進度

      大家是否會遇到這些需求:

      1. 如果有三個tab頁簽,從某個tab頁簽下跳出去打開新頁后,點擊瀏覽器后退鍵,能回到跳出去的相應tab頁簽下

      2. 希望像原生app那樣在wap端的列表頁跳到詳情頁,點擊瀏覽器后退鍵,能回到跳出去的列表處

      3. 如果有上拉加載更多,希望還是能回到相應頁碼處

      4. 能多端同步閱讀進度么?高并發的短網址服務如何能保證性能?

      下面我們就從易到難,一個一個的來解決上面的問題:

      場景一

      如果有三個tab頁簽,從某個tab頁簽下跳出去打開新頁后,點擊瀏覽器后退鍵,能回到跳出去的相應tab頁簽下

      解決思路

      1. 切換頁簽是記錄是哪個頁簽

      $.each(me.$elements.$navBarItems, function(index, item) {     var navbaritemHM = me.createHammer(item);     navbaritemHM.on('tap', function (e) {         var tabtype = $(e.currentTarget).attr('data-tabtype');         // 頁簽切換打點         me.fire('tabChangeClick', {             id: me.options.entUuid,             tabtype: tabtype         });         me._pushHistoryState(tabtype);         me._hideLoadmoreBtnWrap();         me._handleNavbarClick(e, tabtype);     }); });

      注意上面的me._pushHistoryState(tabtype)的方法;負責記錄tabtype? 那應該記錄在哪兒呢?

      首先,我嘗試了

      history.replaceState(null, '', newURL);

      但是發現瀏覽器goback時,會不斷的pushstate,一直退出不去了,所以不能這么做

      那就只能放到全局變量中了,在跳出時再replaceState(null, '', newURL);

      _pushHistoryState: function (tabtype) {     var hash = location.hash;     var originURL = location.href;     if (hash) {         var hrefSplit = location.href.split('#')         originURL = hrefSplit[0];     }     var newURL= util.updateUrlQuery('type', tabtype, originURL);     if (hash) {         newURL += hash;     }     // 添加頁簽類型     // history.replaceState(null, '', newURL);     globalData.set({         lastURL: newURL     }); }

      上面的代碼中globalData就是個全局變量

      代碼如下:

      var Gd = {     set: function () {         var args = arguments;         if (args.length === 1 && typeof args[0] === 'object') {             $.extend(this, args[0]);         }         else if (args.legnth === 2 &&  typeof args[0] === 'string') {             this[args[0]] = args[1];         }     } }; module.exports = Gd;

      然后跳出去的時候history.replaceState

      // 列表跳轉打點     me.on('jumpClick', function (opt) {     // 頁面跳轉前修改state     var lastURL = globalData.lastURL;     var hash = globalData.hash;     if (!lastURL) {         lastURL = location.href;     }     if (hash) {         var oHash = location.hash;         if (oHash) {             lastURL = lastURL.split('#')[0];         }         lastURL = lastURL + '#' + hash;     }     history.replaceState && history.replaceState(null, '', lastURL); });

      等goback列表頁時,會從url上取tab類,如果有就覆蓋傳入的tabtype

      var main = function (options) {     // 頁簽分類     var tabs = JSON.parse(options.tab) || [];     // url的query     var type = util.getQueryValue(location.href, 'type');     if (type) {         // 適配亂輸入type         type = ['word', 'txt', 'vision'].indexOf(type) === -1 ? null : type;     }     if (tabs.length > 0) {         if (!type) {// 第一個頁簽             type = tabs[0].icon;         }     }        // 主view     var view = new View({         el: options.el,         pageWrap: options.pageWrap,         Mediator: Mediator,         entUuid: options.entUuid,         tab: options.tab,         icon: type     });

      需要注意的地方是,適配下用戶亂輸入query

       if (type) {         // 適配亂輸入type         type = ['word', 'txt', 'vision'].indexOf(type) === -1 ? null : type; }

      場景二

      希望像原生app那樣在wap端的列表頁跳到詳情頁,點擊瀏覽器后退鍵,能回到跳出去的列表處

      解決思路

      如果列表有分類,那很簡單可以套用上面的方案,頁面滾動時,記錄滾動到哪個分類下,存到globalData中,跳出去時history.replaceState

       // 頁面跳轉前修改state     var lastURL = globalData.lastURL;     var hash = globalData.hash;     if (!lastURL) {         lastURL = location.href;     }     if (hash) {         var oHash = location.hash;         if (oHash) {             lastURL = lastURL.split('#')[0];         }         lastURL = lastURL + '#' + hash;     }     history.replaceState && history.replaceState(null, '', lastURL);

      思路就是頁簽類型用query記錄,位置用hash來記錄

      頁面加載完就可以根據hash跳轉到相應的位置

      // 根據錨點頁面滾動到相應的路徑分類下     _scrollToPath: function() {         var me = this;         var hash = location.hash;         if (hash) {             var anchor = hash.split('#')[1];             var pathWrap = me.$elements.$allPathWrap.filter(function(index) {                 if ($(this).attr('data-pathtype') === anchor) {                     return true;                 }             });             $(window).scrollTop(pathWrap.offset().top);         }     },

      如果沒有分類,那就只能記錄頁面滾動距離,存到localstorage里面,后退回來,取出來距離跳轉相應位置

      場景三

      如果有上拉加載更多,希望還是能回到相應頁碼處

      解決思路

      如果頁面只顯示一頁,上拉加載更多,下拉刷新,這個問題也很好解決,存到localstorage里面,后退回來,重新加載數據

      如果是上拉加載更多,一直累加dom,這個只能是緩存之前的數據到前端了,木有別的辦法了

      場景四

      能多端同步打開短網址,速度一致嗎?

      這個問題只能是存庫了,頁面滾動時候,存到localstorage的同時,發后端請求記錄到數據庫了

      總結

      關于閱讀進度的記錄,除非就是

      • 合理使用url query和hash記錄進度

      • history.replaceState記錄跳出去的頁面url

      • localstorage記錄頁碼,甚至是數據

      • 頁面滾動時,實時記錄閱讀進度并存到短網址數據庫

      掃描二維碼推送至手機訪問。

      版權聲明:本文由短鏈接發布,如需轉載請注明出處。

      本文鏈接:http://www.virginiabusinesslawupdate.com/article_370.html

      分享給朋友:

      相關文章

      小企業面對618京東淘寶“二選一” 有關部門能管些啥?

      小型的電商渠道們現在依然著上演京東和淘寶“二選一”這出戲?!皬姆ɡ砩现v,工商局的規矩實際上已歸于行政手法干涉司法的情形。換句話講,這個規矩的意思是,你假如違反了法令,會遭到工商層面的行政賞罰。但你很難把618、雙11這種臨時性促銷節、短期商...

      七個用戶體驗設計的小提示,助你建最佳的移動設計

      好的規劃處理了這兩個疑問:它明晰重視用戶的首要方針,并經過界面明晰度消除用戶的一切妨礙。打開網頁時,一般會顯現登錄墻。請記住,過早的強制注冊也許致使超過85%的用戶放棄商品。鄙人面的示例中,Soundcloud請求用戶登錄才能拜訪運用的內容...

      FT12短網址:小黃車的商標所有人訴ofo侵犯注冊商標專用權

      FT12短網址獲悉,因以為“ofo小黃車”侵略了“小黃車”的注冊商標,“小黃車”的商標所有人數人(上海)智能科技有限公司將“ofo小黃車”的商標所有人北京拜克洛克科技有限公司訴至法院,日前,海淀法院受理了此案。原告訴稱,原告數人(上海)智能...

      在SEO優化中,短網址鏈接并不是有效的外鏈

      在SEO優化中,短網址鏈接并不是有效的外鏈

      早些時分寫過篇《短網址也算是一種有用外鏈方法》的文章,如今來證明短網址連接并不是有用外鏈,僅僅一種外鏈推行方法?! 『螢橛杏猛怄?就是在查詢網站反鏈時能直接顯示出來,而反鏈關于網站的排名至關重要,反鏈的作用這兒不做科普,反鏈查詢指令“dom...

      要怎樣努力,才能修煉成一個架構師?

      未來是不是人人都要學習編程?很久之前有一部電影叫黑鷹墜落,里邊有一個場景是一個打字員在那兒說,因為我會打字,所以我不用上前線。這事放在現在看就比較搞笑了,畢竟現在絕大部分人都會打字。我覺得在未來,編程會像英語、電腦一樣是一個很通用的技能。首...

      騰訊的馬化騰與朱嘯虎剛吵完 ofo就宣布換新智能鎖

              據FT12短網址6月20日獲得的消息, ofo小黃車今天宣告,與中國電信和華為共同研制的全球首款同享單車NB-IoT “物聯網智能鎖”,開端正式應用到ofo的小黃車上。昨天下午騰訊董事...

      發表評論

      訪客

      ◎歡迎參與討論,請在這里發表您的看法和觀點。
      一本色综合网久久
    2. <acronym id="eyrpt"></acronym>
      <track id="eyrpt"></track>
      <p id="eyrpt"></p>

        <table id="eyrpt"><ruby id="eyrpt"></ruby></table>
        <table id="eyrpt"></table>