这一节要做的是首页的轮播图模块,做好了之后,效果应该就是这样式的,
我们使用的是vant框架的 Swipe 轮播组件,
查看文档得到,使用它,应该先把它import进入进来,就像这样,
然后src/main.js的文件就是这样,
然后我在网上找了三张图片,把它们的路径链接写在vue文件中的data里,
<!-- 使用轮播图组件 -->
现在我们已经有数据了,那么怎么使用它呢?接着看代码的文档、演示,
喔~~~,原来是这样,其实还是一些封装好的自定义组件。把上面的代码直接复制到vue的template中,
这时如果你没有写错的话,页面上就应该会出现轮播图效果了。
<!-- 处理懒加载 -->
然后同学们有没有注意到,咱们的图片是http的远程图片,这种情况下我们需要处理一下懒加载,接着看文档,
就像刚才那样将Lazyload组件引入进来,然后在v-for循环中将加入就可以了,