vue新闻滚动_vue实现新闻展示页的步骤详解

需求

1.  做一个新闻展示页

2.  新闻分类可以自定义

3.  每类新闻的内容，样式不一样

4.  上拉加载新的数据

5.  点击进入详情页，再返回时，定位到原来的位置

图片展示

采用的技术

轮播图使用：swiper

zepto.js

vue.js

vue.resource.js

vue-router.js

滑动插件：iscroll.js

界面样式采用的   weui

设计的思路

因为使用了vue.js  每个分类的样式不一样，而且分类是可以配置的。所以呢，想到了单页面应用，所以选择了vue-router.js的路由。也使用了vue.resource 插件用来做数据传输。

因为我比较菜，所以呢还是使用的原始的引入方式，没有使用webpack之类的打包工具，就最原始的js 写法。

难点

使用了路由，是为了返回的时候，可以回到刚才离开的地方，vue虽然有自带的keep-alive  但是似乎必须使用路由的history模式，还要修改服务器端的东西，所以感觉不是很合适。而且我们需要Ajax加载数据，怎样能返回路由的时候，展示ajax加载的内容呢？

我想到了记录个数，每次进入路由再从这个数开始加载，但是呢我们没有下拉更新，用户再也看不到之前看的内容。

后来我想到了H5 的缓存方法。使用了sessionStorage。

sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

再离开一个路由之前，把这个路由现在状态信息全部记录下来(包括提示语，滑动位置，新闻内容等)，等下次进入这个路由的时候，再取出来数据这样就实现了不管加载多少数据，再次进入这个路由的时候，都可以和上一个衔接上。

下图为存在缓存里面的内容。而且一关闭浏览器数据会被清空

有一个重要的地方是：sessionStorage 是有最大容量的，应该是有容量限制的，我找了找localStorage 5M左右，sessionStorage 我还没有找到，但在项目中运行情况来看，暂时稳定。

重要代码展示

路由的定义