vue实现新闻展示页的步骤详解.pdf
文本预览下载声明
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 的缓存方法。使用了session torage。
session torage用于本地存储一个会话 (session )中的数据 ,这些数据只有在同一个会话中的页面才能访问并且当会话结束
后数据也随之销毁。因此session torage不是一种持久化的本地存储 ,仅仅是会话级别的存储。
再离开一个路由之前 ,把这个路由现在状态信息全部记录下来 (包括提示语 ,滑动位置 ,新闻内容等 ),等下次进入这个路由
的时候 ,再取出来数据这样就实现了不管加载多少数据 ,再次进入这个路由的时候 ,都可以和上一个衔接上。
下图为存在缓存里面的内容。而且一关闭浏览器数据会被清空
有一个重要的地方是 :session torage 是有最大容量的 ,应该是有容量限制的 ,我找了找local torage 5M左
右 ,session torage 我还没有找到 ,但在项目中运行情况来看 ,暂时稳定。
重重要要代代码码展展示示
路由的定义
重点的是每个组件里面的方法
每个组件都共用的data , create 和 methods_all
var returndata={
swipertime:swipertime,
demoData: [],
demoData2:[],
message:正在加载数据,
iscrollaction:false,
token:{pigcms:$token},
cdn:{pigcms::C(cdn_images)},
param:{
api_url:{pigcms::C(api_weixin)},
local_url:{pigcms::C(site_url)},
classid: -1,
startnum: 0 ,
other:
},
ajax_status:false,
huadong:true,
}
//组件开始的时候 ,先注销掉上一个组件的滑动 ,然后查看缓存里面有没有数据 ,如果有缓存就进入缓存里面 ,如果没有 ,就重新加载
var crea
显示全部