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

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

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

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

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

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

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

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

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

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

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

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

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

26910
来自专栏web

vue-router基本使用

1502
来自专栏编程微刊

前端程序员表白神器

3392
来自专栏liulun

在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” image.png 然后点击配置HTML语言的基础设置 image.png 然后在...

2238
来自专栏一枝花算不算浪漫

[小知识点]绝对路径与相对路径.

31211
来自专栏Jerry的SAP技术分享

微信小程序开发系列七:微信小程序的页面跳转

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

2172
来自专栏deepcc

简单的滑动条

38713
来自专栏Golang语言社区

如何使用golang实现操作键盘按键

https://godoc.org/github.com/nsf/termbox-go 这个库可以支持 简单示例: package main import...

4875
来自专栏大前端开发

使用mpvue开发小程序教程(三)

在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处。从本文起我们就开始涉及真正的编...

3573
来自专栏伦少的博客

通过Vue CLI 快速创建Vue项目并部署到tomcat

最近一直在写前端,用的是JSP,但是很多人都说JSP已经过时了。既然做了几个月的前端,那就把前端学的好一点,学点新技术,跟上潮流。感觉Vue挺火的,所以这几天学...

4962

扫码关注云+社区

领取腾讯云代金券