| 失效链接处理 |
|
vue实现新闻展示页的步骤详解 PDF 下载
本站整理下载：
相关截图：
主要内容：
最近小编遇到这样的需求，要实现一个新闻展示页功能，刚接到这样的需求还真是一头雾水，不知从哪入手，
今天小编通过实例代码给大家介绍下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 我还没有找到，但在项目中运行情况来看，暂时稳定。
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
