文档详情

vue实现新闻展示页的步骤详解.pdf

发布:2021-08-03约7.06千字共4页下载文档
文本预览下载声明
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
显示全部
相似文档