上篇文章链接:Vue+Vux学历案例(三)—构建开源中国微信版(添加网络通信)
下面是效果图:
首先新建资讯详情页NewsDetail.vue
<template>
<tabbar class="tabbar">
<div class="title">{{title}}</div>
<tabbar-item class="search">
</tabbar-item>
</tabbar>
<h3 class="htitle">{{result.title}}</h3>
<div id="content"></div>
</template>
<style>
.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;
}
</style>
<script>
import Tabbar from 'vux/dist/components/tabbar'
import TabbarItem from 'vux/dist/components/tabbar-item'
import { getNewsDetail } from '../utils/api'
export default{
name:'NewsDetail',
data () {
return {
title: '',
result:'',
}
},
components:{
Tabbar,
TabbarItem,
},
ready () {
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.result;
this.body=this.result.body;
document.getElementById("content").innerHTML=this.body;
}
}
}
}
</script>
这里收到的服务端返回的data.result.body是html字符串,需要转化下,否则页面看到的都是标签加内容
api.js修改:
/**
* Created by mwuyz on 2016/10/28.
*/
import "whatwg-fetch"
import promise from "es6-promise"
const host_addr='http://192.168.1.107:8081/'
/*
*获取资讯列表
*/
export let getList = async (page, tag) => {
let response = await fetch(host_addr+`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(host_addr+`news_detail?id=${id}`, {
method: 'GET',
mode: 'cors',
}).catch((error) => {
console.log(error)
})
return await response.json().catch((error) => {
console.log(error)
})
}
然后NewsList.vue页面修改下:这个页面用到scroller组件,除了height设置合适外,还需要在里面设置height够长的地div,之前没有设置的导致不能正常滚动
css设置这个div的高度
.news-wrap {
height: 1800px;
overflow: hidden;
}
NewsList.vue的完整代码:
<template>
<div>
<scroller lock-x scrollbar-y height="360px" :prevent-default="false" v-ref:scroller>
<div class="news-wrap">
<cell v-for="x in Objlist" :title="x.title" v-link="{path: '/newsdetail',query:{id:x.id,tag:'资讯'}}" :inline-desc='x.body'>
<img class="ic_img" slot="icon" src="../assets/image/ic_label_today.png">
<div>
<span class="pubdate">{{x.pub_date}}</span>
</div>
</cell>
</div>
</scroller>
</div>
</template>
<style>
.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 {
height: 1800px;
overflow: hidden;
}
.pubdate{
font-size:5px;
}
</style>
<script>
import Scroller from 'vux/dist/components/scroller'
import Cell from 'vux/dist/components/cell'
import Group from 'vux/dist/components/group'
import { getList } from '../utils/api'
import Divider from 'vux/dist/components/divider'
export default{
data(){
return{
ishow:false,
Objlist:[],
pageIndex:1,
catalog:0,
}
},
components:{
Scroller,
Cell,
Group
},
ready () {
this.getList()
},
methods:{
async getList() {
let data =await getList(this.pageIndex, this.catalog)
console.log(data)
var news_list=data.result.items;
if(news_list.length>0){
this.ishow=true
for(var i=0;i<news_list.length;i++){
var time = news_list[i].pubDate;
var bngDate = new Date(time.replace("-", "/").replace("-", "/"));
var endDate = new Date();
var minutes = (endDate.getTime()-bngDate.getTime())/60/1000;
if(minutes>=60){
minutes=minutes/60;
}else{
var minute=parseInt(minutes);
news_list[i].pubDate=minute+ "分钟以前"
}
var datetime=parseInt(minutes);
if(datetime>=48){
news_list[i].pubDate="2天前"
}else if(datetime>=24){
news_list[i].pubDate="昨天"
}else{
news_list[i].pubDate=datetime+ "小时以前"
}
this.Objlist.push(news_list[i]);
}
}
this.locked = false
this.loading = false
},
load (uuid) {
setTimeout(() => {
this.getList();
this.$broadcast('pulldown:reset', uuid)
}, 1000)
},
}
}
</script>
其他改动,集成了vuex,不知道怎么整合vuex的,可以看下源码, 源码下载点这里
关于和开源中国api的转发服务(Spring-Boot搭建),一直没发链接,转发服务点这里