当前位置:首页 > 短网址资讯 > 正文内容

FT12短网址教你如何记录阅读进度

www.ft12.com8年前 (2017-08-01)短网址资讯2090

大家是否会遇到这些需求:

  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记录页码,甚至是数据

  • 页面滚动时,实时记录阅读进度并存到短网址数据库

扫描二维码推送至手机访问。

版权声明:本文由短链接发布,如需转载请注明出处。

本文链接:https://www.ft12.com/article_370.html

分享给朋友:

相关文章

如何使营销短信效果最大化?FT12「短链接」统计功能来支招

营销短信可以用较低成本换来高转化率,同时可以达到精准营销的目的,因而广泛受到电商平台的追捧。 但短信链接有没有被点击,短信发出去后的效果如何?如何让营销短信变成用户喜爱的有价信息而非垃圾信息?如何评估营销短信转化率?FT12「短链...

从词典查词到文本检索

从词典查词到文本检索

十一假期大家过的还好吗?时间过得真快,距离上一次跟大家聊技术已经过了快三周了。老王很开心今天又能跟大家一起扯淡了,用一句通俗的话讲就是:老王想死你们了!今天准备跟大家聊的,乃是大名鼎鼎的文本检索技术。也就是大家天天都在用的“百度一下”。&n...

支付宝官方曝光“刷脸支付”系统  刷脸的时代即将来临

支付宝官方曝光“刷脸支付”系统 刷脸的时代即将来临

昨天上午短网址资讯报道了支付宝“刷脸支付”功用曝光的音讯,疑似呈现了支付宝刷脸支付终端机,网友们纷繁表示“靠脸吃饭”时期要来了。如今支付宝官方向IT之家确认,这项“刷脸支付”功用行将上线。在视频中显现,一位测试者不用手机、不输入账号,仅靠刷...

谷歌新品发布的背后:AI并不是功能增加,而是彻底改变

谷歌新品发布的背后:AI并不是功能增加,而是彻底改变

[ FT12短网址 ] 谷歌按例发不了新的手机和可穿戴设备,谷歌一直善于巧用AI解决一些其他厂商诉诸硬件才能解决的问题;同时,他们也善于在AI基础上推出新的软硬件结合产品。这种能力可能会为我们带来更多惊喜。谷歌这一次的新品发布会,并不是单纯...

每天坚持不懈的写软文,得到的几点心得感悟

每天坚持不懈的写软文,得到的几点心得感悟

夜深了,我喜欢这样宁静的夜,它能让人不用去想更多的事情,专注于做自己想做的事情,我认为是一种幸福的事情,拿着手机播放了今晚的《半夜听》节目,听这个节目已经有一段时间了,虽然每天只有那么短短的几分钟,但是那些字眼确实令我欲罢不能,听完几分钟的...

优胜略汰,7个在 iOS 11 上被移除的功能

iOS 11 上增加的很多新功能我们都已经有所了解,不过,在新版系统当中,苹果同样也移除和淘汰了一些认为对用户体验帮助不大的功能,而且不易被用户察觉。本文我们就为大家综合了多个在 iOS 11 上被移除的功能,看看对你来说是不是都无用。1、...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。