3.轮播图

<!-- 资讯 -->
<template>
  <div>
    <!-- 轮播图 -->
    <swiper :list="imgs" auto style="width:100%;height:120px;margin:0 auto;" dots-class="custom-bottom" dots-position="center"></swiper>
  </div>
</template>

<script>
  // 引入 vux 内部组件
  import { Swiper } from 'vux'
  // 引入 api接口文档
  import { getList } from '../../api'

  // 轮播图列表
  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
    },
    data(){
      return {
        imgs:urlList,
      }
    }
  }
</script>

 

4.效果图

本文地址: vue2.0 + vux (五)api接口封装 及 首页 轮播图制作