设置代理,避免出现跨域问题
/*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2/', changeOrigin: true, pathRewrite: { '^/api': '' } } },
api/index.js 接口配置
/** * 引入 异步请求API */ import "whatwg-fetch" const host_addr='http://192.168.1.110:8081/' /** * 获取资讯列表 * 解决跨域问题: 用 '/api' 代替 host_addr */ export let getList = async (page, tag) => { let response = await fetch('/api' + `news_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, { method: 'GET', mode: 'cors' }).catch((error) => { console.log(error) }) return await response.json().catch((error) => { console.log(error) }) } /** * 获取资讯详情 */ export let getNewsDetail = async (id) => { let response = await fetch('/api' + `news_detail?id=${id}`, { method: 'GET', mode: 'cors' }).catch((error) => { console.log(error) }) return await response.json().catch((error) => { console.log(error) }) } /** * 获取博客列表 */ export let getBlogList = async (page, tag) => { let response = await fetch(host_addr + `blog_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, { method: 'GET', mode: 'cors' }).catch((error) => { console.log(error) }) return await response.json().catch((error) => { console.log(error) }) } /** * 获取问答列表 */ export let getQuestionList = async (page, tag) => { let response = await fetch(host_addr + `question_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, { method: 'GET', mode: 'cors' }).catch((error) => { console.log(error) }) return await response.json().catch((error) => { console.log(error) }) } /** * 获取活动列表 */ export let getEventList = async (page, tag) => { let response = await fetch(host_addr + `event_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, { method: 'GET', mode: 'cors' }).catch((error) => { console.log(error) }) return await response.json().catch((error) => { console.log(error) }) }
1.资讯页
NewsList.vue
<!-- 资讯 --> <template> <div> <!-- 轮播图 --> <swiper :list="imgs" auto style="100%;height:120px;margin:0 auto;" dots-class="custom-bottom" dots-position="center"></swiper> <!-- 滚动列表 --> <div> <scroller lock-x scrollbar-y :height="height" :bounce=false :scrollbarY="false" ref="scroller"> <div class="news-wrap-list"> <cell v-for="x in Objlist" :title="x.title" :link="{path:'/newsDetail',query:{id:x.id,tag:'资讯'}}" :inline-desc="x.body" :key="x.id"> <img class="ic_img" slot="icon" src="../../assets/img/ic_label_today.png"> <div> <span class="pubdate">{{x.pub_date}}</span> </div> </cell> </div> </scroller> </div> </div> </template> <script> // 引入 vux 内部组件 import { Swiper, Scroller, Cell } from 'vux' // 引入 api接口文档 import { getList } from '../../api/index.js' // 轮播图列表 const imgList = [ 'http://file06.16sucai.com/2016/0222/17714c3b51079911760e5ef7fdb553f6.jpg', 'http://pic.58pic.com/58pic/15/67/98/93C58PICjeM_1024.jpg', 'http://file06.16sucai.com/2016/0315/1df566087c24a94cd9534bc9bc1871ff.jpg' ]; // 轮播图图片地址列表 const urlList = imgList.map((one, index) => ({ url: 'javascript:', //这里填写图片点击的链接 img: one })); export default { name: 'NewsList', components:{ Swiper, Scroller, Cell }, data(){ return { imgs:urlList, Objlist:[], ishow:false, pageIndex:1, catalog:0, height: '' } }, created(){ // 获取屏幕高度 this.height = document.documentElement.clientHeight - 46 - 44 - 120 - 53 + 'px'; console.log(this.height); // 请求列表数据 this.getList(); }, methods:{ // 异步请求 async getList(){ // 获取列表数据 let data = await getList(this.pageIndex, this.catalog); console.log(data); // 获取资讯列表数据 var news_list = data.obj_list; // 判断是否还有数据 if(news_list.length > 0){ this.ishow = true; for(var i=0;i<news_list.length;i++){ var time = news_list[i].pub_date; // 修改日期显示格式 var bngDate = new Date(time.replace(/-/g,"/")); var endDate = new Date(); var minutes = (endDate.getTime() - bngDate.getTime())/60/1000; // 时间段 判断pub_date显示内容 if(minutes >= 60){ minutes = minutes/60; var dateTime = parseInt(minutes); if(dateTime >= 48){ news_list[i].pub_date = "2天前"; }else if(dateTime >= 24){ news_list[i].pub_date = "昨天"; }else{ news_list[i].pub_date = dateTime + "小时以前"; } }else{ var minute = parseInt(minutes); news_list[i].pub_date = minute + "分钟以前"; } news_list[i].title = " " + news_list[i].title; this.Objlist.push(news_list[i]); } } this.locked = false; this.loading = false; }, load(uuid){ setTimeout(() => { this.$broadcast('pulldown:reset', uuid); }, 1000); } } } </script> <style lang="less" scoped> .ic_img{ position:absolute; top:10px; left: 5px; 15px; height:15px; } .weui_cell_bd>p{ font-size:15px; } .vux-label-desc{ padding-right:15px; } .weui_cell_bd.weui_cell_primary{ padding-left:5px; } .news-wrap-list { height: 2800px; overflow: hidden; } .pubdate{ font-size:5px; } </style>
2.资讯详情页
NewsDetail.vue
<!-- 资讯详情页 --> <template> <div> <tabbar class="tabbar"> <div class="title">{{title}}</div> <tabbar-item class="search"></tabbar-item> </tabbar> <h3 class="htitle">{{result.title}}</h3> <scroller lock-x scrollbar-y :height="height" :bounce=false :scrollbarY="false" ref="scroller"> <div id="content" class="contentDiv"></div> </scroller> </div> </template> <script> import { Tabbar,TabbarItem,Scroller} from 'vux' import { getNewsDetail } from '../../api/index.js' // 引入 jquery import "jquery" var $ = require('jquery'); window.$ = $; export default{ name:'NewsDetail', data () { return { title: '', result:'', body: '', height: '' } }, components:{ Tabbar, TabbarItem, Scroller }, created () { // 获取屏幕高度 this.height = document.documentElement.clientHeight - 50 - 100 - 53 + 'px'; console.log(this.$route.query); this.title = this.$route.query.tag; this.getDetail(); }, methods:{ // 获取消息id,根据id到服务端请求详情 async getDetail() { let data = await getNewsDetail(this.$route.query.id); console.log(data); if(data.code >= 0){ this.result = data.obj_data; this.body = data.obj_data.body; $(".contentDiv").html(this.body); //获取div高度,根据该高度设定滑动区域,避免footer位置变化 var contentHeight=$(".contentDiv").height() + 50; document.getElementById("content").style.height = contentHeight + "px"; this.$nextTick(() => { this.$refs.scroller.reset(); }); } } } } </script> <style lang="less" scoped> .tabbar{ background-color:#00CC66; height:50px; position:relative; } .search{ position:absolute;right:5px;top:5px;z-index:999; } .title{ text-align:center; margin:auto; color:white; line-height:50px; font-size:18px; } .htitle{ text-align:center; margin:auto; color:black; line-height:50px; height: 100px; } </style>
3.效果图