VUE.JS+KOA2 Mobile e-commerce combat 6

the production of the Home Carousel chart　1. Load swipe components on demand

As a rule, we need to import the components when we use the vant components. /src/main.jsunder the following on-demand introduction, the code is as follows:

Import {button, row, Col, Search, Swipe, Swipeitem  } from ' Vant 'vue.use (button). Use (Row). Use (Col). Use (Swipe). Use (Swipeitem)

After the introduction of the success, you can write the Carousel diagram code.

2. Download these three photos

We make three pictures of the Carousel map, you can download it first. The images are placed on the seven cow cloud, you can download them, or you can use these image addresses directly.

Start making carousel diagram

First we write a data parameter in the JS section bannerPicArray and put the image address inside.
　　/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 '},            ]        }    },

Template files are as follows

<!--swipwer area--><div class= "Swiper-area" > <van-swipe:autoplay= "+"    >        < Van-swipe-item vfor = "(Banner,index) in Bannerpicarray": key= "index" >                    </van-swipe-item>    </van-swipe></div>

CSS code:

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

This time you will find that CSS style is not the effect we want, this is mainly with the Vant component, he has some default style, so we have to do some CSS repair operation.
　　overflow: hidden;,clear:both;

Using Vant to implement lazy loading of picture carousel

Introduce vant image lazy loading component, we will have a lot of remote pictures in the future, so it is necessary to enable the lazy loading of pictures, that is just the first time we started to use remote pictures here, we learn a piece of lazy loading

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)

Then modify our template area, add v-lazy="banner.imageUrl" to the image of the lazy Add.

VUE.JS+KOA2 Mobile e-commerce combat 6