vue2.0 + vux （六）NewsList 资讯页 及 NewsDetail 资讯详情页

设置代理,避免出现跨域问题

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