Vue+Vux学习案例(五)—构建开源中国微信版(轮播图实现)

上篇：Vue+Vux学习案例(四)—构建开源中国微信版(增加资讯详情，集成Vuex)

 使用Scroller组件完成了滑动列表展示信息，这篇介绍下轮播图集成实现：

  首先import我们需要的Swiper组件，

import Swiper from 'vux/dist/components/swiper'

后面还要在components 中注册上，否则页面上是无法显示出来的，

页面代码：

<swiper :list="imgs" auto style="width:100%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>

调整宽度width为100%铺满，高度自动调节，这里我们的图片分辨率需要设计合理，

整个代码写在NewsList.vue里面了，下面看完整代码：

<template>
  <div>
    <swiper :list="imgs" auto style="width:100%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
  <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 Swiper from 'vux/dist/components/swiper'
    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'

    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{
        data(){
            return{
                ishow:false,
                Objlist:[],
                pageIndex:1,
                catalog:0,
                imgs:urlList,
            }
        },
        components:{
            Scroller,
            Cell,
            Group,
            Divider,
            Swiper
        },
        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;
                         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+ "小时以前"
                         }
                       }else{
                         var minute=parseInt(minutes);
                         news_list[i].pubDate=minute+ "分钟以前"
                       }

                      this.Objlist.push(news_list[i]);
				          }

				       }
				       this.locked = false
				       this.loading = false
			},
			load (uuid) {
         setTimeout(() => {
         this.getList();
         this.$broadcast('pulldown:reset', uuid)
        }, 1000)
      },
    }
  }
</script>

效果如下：

源码下载点这里

项目运行：npm run dev ,这里代码的端口修改在config目录index.js文件中，

本项目代码运行起来后，可以打开http://localhost:8082浏览