Framework7使用无限滚动返回到上次查看位置的上一页

Question

我正在开发一个移动应用程序，该应用程序可以从多个位置收集文章。该应用程序在路由器中提取文章，并使用页面模板进行投放。我希望显示与reddit和其他应用程序相似的文章。我希望我的用户能够查看该文章，然后单击返回以返回到他们在结果中所处的位置。我正在使用无限滚动，这会使事情变得更加复杂。目前，当我单击返回时，它会重新加载页面并仅显示前10个结果。

路由器

{
    path: '/articles/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Router instance
      var router = this;

      // App instance
      var app = router.app;

      // Show Preloader
      app.preloader.show();

      // Simulate Ajax Request
      setTimeout(function () {
        articles=[];
        app.request.get( app.data.api.articles, 
            function (data){ // Success
                console.log(data);
                if(data.length>0){
                    for(i=0;i<=data.length-1;i++){
                        var art={
                            'id':data[i].id,
                            'title':data[i].title.rendered,
                            'img':data[i].featured_image.thumb,
                            'excerpt':data[i].excerpt.rendered
                        };
                        articles.push(art);
                    }
                    resolve(
                        { componentUrl: './pages/articles.html' },
                        { context: { articles: articles } }
                    );
                    app.preloader.hide();
                }else{
                    console.log(data); 
                    app.preloader.hide();
                    app.dialog.alert('Unable to load articles! Please try again shortly.');
                }
            },
            function (data){ 
                console.log(data);  
                app.preloader.hide();
                app.dialog.alert('Unable to load articles! Please try again shortly.');
            },
            'json'
        );  
      }, 1000);
    },
},

文章的Onclick事件

$$('#articleList .item-content').click(function(){
    var id = $$(this).attr('data-id');
    mainView.router.navigate('/view-article/'+id+'/');
}).css('cursor','pointer');

文章模板

<div class="page-content">
    <div class="list searchbar-found media-list">
      <ul id="articleList">
        {{#each articles}}
        <li class="item-content" data-id="{{id}}">
            <div class="item-media"><img src="{{img}}" /></div>
            <div class="item-inner">
                <div class="item-title"><strong>{{title}}</strong></div>
                {{excerpt}}
            </div>
        </li>
        {{/each}}
      </ul>
    </div>
    <!-- Nothing found message -->
    <div class="block searchbar-not-found">
      <div class="block-inner">Nothing found</div>
    </div>
</div>