码迷,mamicode.com
首页 > 移动开发 > 详细

Vue.js+Koa2移动电商实战6

时间:2018-05-24 20:42:23      阅读:417      评论:0      收藏:0      [点我收藏+]

标签:dem   云上   opp   代码   index   url   page   location   开始   

首页轮播图的制作

 1.按需加载Swipe组件

  按照惯例我们在使用Vant组件时需要把组件import进来。在/src/main.js下按需引入,代码如下:

import { Button, Row, Col ,Search , Swipe , SwipeItem  } from ‘vant‘
Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem)

  引入成功后,就可以写轮播图代码了。

 2.下载这三张图片

  我们作轮播图的三张图片,你可以先下载好。图片放到了七牛云上,你可以下载,也可以直接使用这些图片地址。

 开始制作轮播图

  首先我们在js部分写入一个data参数bannerPicArray,把图片地址放入到里边。
  /src/components/pages/ShoppingMall.vue

 data() {
        return {
            locationIcon: require(‘../../assets/images/location.png‘),
            bannerPicArray:[
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic001.jpg‘},
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic002.jpg‘},
                {imageUrl:‘http://7xjyw1.com1.z0.glb.clouddn.com/simleVueDemoPic003.jpg‘},
            ]
        }
    },

  模版文件如下

<!--swipwer area-->
<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;
  }

  这时候你会发现CSS样式并不是我们想要的效果,这主要是用Vant组件,他有一些默认的样式,所以我们要做一些CSS的修复操作。
  overflow: hidden;,clear:both;

 利用Vant实现图片轮播的懒加载

  引入Vant的图片懒加载组件,以后我们的项目中会有很多远程图片,所以启用图片懒加载是必须的,那正好我们这里第一次开始用远程图片,就在这里学一下图片的懒加载

import { Button, Row, Col ,Search , Swipe , SwipeItem , Lazyload  } from ‘vant‘
Vue.use(Button).use(Row).use(Col).use(Search).use(Swipe).use(SwipeItem).use(Lazyload)

  然后修改一下我们的template区域,加入v-lazy="banner.imageUrl"就可以图片的懒加了。

Vue.js+Koa2移动电商实战6

标签:dem   云上   opp   代码   index   url   page   location   开始   

原文地址:https://www.cnblogs.com/xiaofandegeng/p/9084877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!