设置代理,避免出现跨域问题
/*设置代理,避免出现跨域问题*/
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="width: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;
width: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.效果图