Vue.js+Koa2移動電商實戰6

標籤：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