《vue+vant+node+mongoDB+koa2》电商项目实战连载(5)

2018-12-07 15:15:42 浏览数 (1)

这一节要做的是首页的轮播图模块,做好了之后,效果应该就是这样式的,

我们使用的是vant框架的 Swipe 轮播组件,

查看文档得到,使用它,应该先把它import进入进来,就像这样,

然后src/main.js的文件就是这样,

然后我在网上找了三张图片,把它们的路径链接写在vue文件中的data里,

<!-- 使用轮播图组件 -->

现在我们已经有数据了,那么怎么使用它呢?接着看代码的文档、演示,

喔~~~,原来是这样,其实还是一些封装好的自定义组件。把上面的代码直接复制到vue的template中,

这时如果你没有写错的话,页面上就应该会出现轮播图效果了。

<!-- 处理懒加载 -->

然后同学们有没有注意到,咱们的图片是http的远程图片,这种情况下我们需要处理一下懒加载,接着看文档,

就像刚才那样将Lazyload组件引入进来,然后在v-for循环中将加入就可以了,

0 人点赞