电商项目笔记（4）---首页轮播图

首页轮播图

html

    <div class="swiper-area">
      <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img :src="banner.imageUrl" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>

css

  .swiper-area{
      width:20rem;
      clear:both;
  }

js

  export default {
    data() {
      return {
        locationIcon: require('../../assets/images/location.png'),
        bannerPicArray: [
          {
            imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554735595094&di=e8091d37506cc4968e8ca7aa04f9aac5&imgtype=0&src=http%3A%2F%2Fwww.bkjia.com%2Fuploads%2Fallimg%2F150417%2F162P43418-0.jpg'
          },
                    {
            imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554735595094&di=e8091d37506cc4968e8ca7aa04f9aac5&imgtype=0&src=http%3A%2F%2Fwww.bkjia.com%2Fuploads%2Fallimg%2F150417%2F162P43418-0.jpg'
          },
                    {
            imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554735595094&di=e8091d37506cc4968e8ca7aa04f9aac5&imgtype=0&src=http%3A%2F%2Fwww.bkjia.com%2Fuploads%2Fallimg%2F150417%2F162P43418-0.jpg'
          },
        ]
      }
    },
  }

温馨提示

在使用之前需要在main.js文件中，引入录播组件；方式如下：

import { Button, Row, Col, Swipe, SwipeItem } from 'vant';
Vue.use(Vant).use(Button).use(Row).use(Col).use(Swipe).use(SwipeItem);