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

来源：互联网发布：雷劈数算法编辑：程序博客网时间：2024/06/05 02:14

上篇：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浏览

0 0