首页轮播图的制作
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"
就可以图片的懒加了。
原文地址:https://www.cnblogs.com/xiaofandegeng/p/9084877.html
时间: 2024-10-09 03:56:04