12、vue-awsome-swiper与轮播图组件

GitHub:https://github.com/Ewall1106/mall

一、新建home.vue

1、上篇我们为了便于展示,把头部my-header组件放在了App.vue页面,现在我们删掉App.vue里面的头部组件然后我们在view文件里面新建一个home.vue页面,然后把头部组件和今天要讲的轮播图组件都放在home.vue页面。

home.vue

2、在routerindex.js中配置路由,将home.vue组件映射到根路由/

router

二、新建轮播图组件

1、我们命名为carousel,初始样子为这样;

carousel.vue

2、然后去home.vue里面引入这个轮播图组件,引入的方式跟头部组件一样,不多阐述。

三、引入swiper实现轮播图效果

1、关于vue-awesome-swiper vue-awesome-swiper是我个人比较倾向的一个轮播图开源组件,GitHub地址在这里:https://github.com/surmon-china/vue-awesome-swiper,官网介绍这里:https://surmon-china.github.io/vue-awesome-swiper/;官网从安装到使用都介绍的很详细了,大家可以去看看;ok,我们从官网选取一种轮播图效果作为我们项目的轮播图,就这个了

swiper

2、用npm安装vue-awesome-swiper

① 在命令行中输入安装依赖

$ npm install vue-awesome-swiper --save

npm

② 然后我们去package.json中看看是否存在

package.jcon

3、怎么用 ok,现在安装完成了,我们怎么在项目中使用?GitHub上说的很明白了,我们一步步来。

(1)GitHub上提供了多种使用方式,我们要在vue项目中要用到的主要是选全部引入还是组件中引入,这里我们选第二种:

github

(2)我们按照它的来在项目中引入:

carousel.vue中引入

(3)html的结构也按照它提供的来复制粘贴一下到carousel.vue中:

github

我们的template结构把右箭头、左箭头什么的注释掉

carousel的html结构

script中的参数添加分页参数和自动轮播两个参数,具体参数注释上也上说的很清楚了,跟swiper官方api参数一样(http://www.swiper.com.cn/api/index2.html

js

(4)然后我们去网上找几张图,写个img

添加img

(5)给img设置一下宽度,最后显示的效果就是这样:

效果

参考学习 https://github.com/surmon-china/vue-awesome-swiper http://www.swiper.com.cn/api/index2.html

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React技巧2(避免无意义的父节点)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

37450
来自专栏微信小程序开发

小程序不同页面之间的传值方式

今天来说一下小程序不同页面之间传值的几种方式: 1、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/d...

774100
来自专栏liulun

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

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

23780
来自专栏GreenLeaves

JavaScript之将JS代码放在什么位置最合适

1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...

21870
来自专栏码生

swift floatWindow 自定义 iphone小圆点 浮动窗口 第三方库 pod

KKFloatWindow create a float window, to do some extra things

15220
来自专栏上善若水

013 mysql 忘记密码,修改密码

启动:sudo service mysql start 停止:sudo service mysql stop

11550
来自专栏微信小程序开发

小程序中滚动条的使用,wx.pageScrollTo和&lt;scroll-view&gt;的对比

知晓程序员,专注微信小程序开发的程序员! 前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指...

89170
来自专栏deepcc

简单的滑动条

404130
来自专栏用户3030674的专栏

Android 全局使用第三方字体

    将文件放入工程assets目录下。(一般个人习惯单独命名一个文件夹放字体文件,也可直接放入根目录,但记得改引用路径)

40020
来自专栏王磊的博客

EasyUI中那些不容易被发现的坑——EasyUI重复请求2次的问题

问题控件:datagrid、combobox、所有能设置url属性的控件 问题版本:1.4.4、1.4.5(之前的版本没测) 问题如图: ? 重复请求2次,错误...

35050

扫码关注云+社区

领取腾讯云代金券