vue.js 使用swiper_如何使用Swiper Vue.js创建垂直滑块？_如何使用Swiper JS创建"coverflow“swiper - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Uniapp学习（1）Uniapp是什么，HBuilder软件介绍

Uniapp是一款基于Vue.js语法的跨平台开发框架，可以同时编写H5、小程序和APP三端代码。开发者只需通过一套代码即可快速地构建多个平台的应用程序。

01

vue-awesome-swiper实现轮播图片

最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时，学习到第三章 3.7-首页顶部轮播图片（vue-swipper）时，学习了vue-awesome-swiper这个库的使用，其npm官网地址是：https://www.npmjs.com/package/vue-awesome-swiper，对应的github项目地址是:https://github.com/surmon-china/vue-awesome-swiper 其官网介绍如下所示：

04

您找到你想要的搜索结果了吗？

是的

没有找到

17 Most popular Vue.js plugins

Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。

03

2021，17个最流行的 Vue 插件

Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个流行的 Vue 插件。

01

前端开发者不得不知道的18个常用的网站

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

01

Vue项目中使用npm i swiper插件踩坑记录

在一个 Vue 项目中使用的，npm 的 swiper 插件，遇到了一些坑，记录一下填坑过程。

03

Vue项目中使用npm i swiper插件踩坑记录

1、使用静态数据时，一切正常， Swiper 可以正常滚动和滑动。但是使用动态数据时，会出现不能自动滚动/播放甚至数据显示不正常的现象。

02

小程序开发框架WePY和mpvue使用感受

今天想和小伙伴聊聊小程序开发框架的问题。种种原因，去年年末接触到了小程序，使用mpvue做了两个项目，也使用WePY做了一个项目，关于这两个框架的恩恩怨怨，我觉得我有资格说两句。

03

vue常用组件库_vue内置组件

element：饿了么出品的Vue2的web UI工具套件 Vux：基于Vue和WeUI的组件库 mint-ui：Vue 2的移动UI元素 iview：基于 Vuejs 的开源 UI 组件库 Keen-UI：轻量级的基本UI组件合集 vue-material：通过Vue Material和Vue 2建立精美的app应用 muse-ui：三端样式一致的响应式 UI 库 vuetify：为移动而生的Vue JS 2组件框架 vonic：快速构建移动端单页应用 eme：优雅的Markdown编辑器 vue-multiselect：Vue.js选择框解决方案 vue-table：简化数据表格 VueCircleMenu：漂亮的vue圆环菜单 vue-chat：vuejs和vuex及webpack的聊天示例 radon-ui：快速开发产品的Vue组件库 vue-waterfall：Vue.js的瀑布布局组件 vue-carbon：基于 vue 开发MD风格的移动端 vue-beauty：由vue和ant design创建的优美UI组件 vue-blu：帮助你轻松创建web应用 vueAdmin：基于vuejs2和element的简单的管理员模板 vue-syntax-highlight：Sublime Text语法高亮 vue-infinite-scroll：VueJS的无限滚动指令 Vue.Draggable：实现拖放和视图模型数组同步 vue-awesome-swiper：vue.js触摸滑动组件 vue-calendar：日期选择插件 bootstrap-vue：应用于Vuejs2的Twitter的Bootstrap 4组件 vue-swipe：VueJS触摸滑块 vue-amap：基于Vue 2和高德地图的地图组件 vue-chartjs：vue中的Chartjs的封装 vue-datepicker：日历和日期选择组件 markcook：好看的markdown编辑器 vue-google-maps：带有双向数据绑定Google地图组件 vue-progressbar：vue轻量级进度条 vue-picture-input：移动友好的图片文件输入组件 vue-infinite-loading：VueJS的无限滚动插件 vue-upload-component：Vuejs文件上传组件 vue-datetime-picker：日期时间选择控件 vue-scroller：Vonic UI的功能性组件 vue2-calendar：支持lunar和日期事件的日期选择器 vue-video-player：VueJS视频及直播播放器 vue-fullcalendar：基于vue.js的全日历组件 rubik：基于Vuejs2的开源 UI 组件库 VueStar：带星星动画的vue点赞按钮 vue-mugen-scroll：无限滚动组件 mint-loadmore：VueJS的双向下拉刷新组件 vue-tables-2：显示数据的bootstrap样式网格 vue-virtual-scroller：带任意数目数据的顺畅的滚动 DataVisualization：数据可视化 vue-quill-editor：基于Quill适用于Vue2的富文本编辑器 Vueditor：所见即所得的编辑器 vue-html5-editor：html5所见即所得编辑器 vue-msgbox：vuejs的消息框 vue-slider：vue 滑动组件 vue-core-image-upload：轻量级的vue上传插件 vue-slide：vue轻量级滑动组件 vue-lazyload-img：移动优化的vue图片懒加载插件 vue-drag-and-drop-list：创建排序列表的Vue指令 vue-progressive-image：Vue的渐进图像加载插件 vuwe：基于微信WeUI所开发的专用于Vue2的组件库 vue-dropzone：用于文件上传的Vue组件 vue-charts：轻松渲染一个图表 vue-swiper：易于使用的滑块组件 vue-images：显示一组图片的lightbox组件 vue-carousel-3d：VueJS的3D轮播组件 vue-region-picker：选择中国的省份市和地区 vue-typer：模拟用户输入选择和删除文本的Vue组件 vue-impression：移动Vuejs2 UI元素 vue-datatable：使用Vuejs创建的DataTableView vue-instant：轻松创建自动提示的自定义搜索控件 vue-dragging：使元素可以拖拽 vue-sli

02

vue开源项目原

优点：时间选择器配色舒适，进度条样式有虚线形式，步骤条更清晰相比有创新。表单字段点击后文字会上浮

04

Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台

最近在跟着Johnny的全栈之巅系列视频教程学习使用NodeJS+Express+Element-UI+MongoDB等开发王者荣耀，服务端server，移动端web，admin，学到了不少东西。总体来说，他讲的视频思路蛮清晰的，跟着做基本上都能快速上手。 Element-UI，网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-UI中文官网地址 Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架，Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。其中文官网地址是：http://www.expressjs.com.cn Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台，目前的Github项目地址是：https://github.com/topfullstack/node-vue-moba 全栈之巅TopFullStack 全栈之巅官方账号下面的内容转载自Johnny老师的关于该项目的Github的README.md文件，感兴趣的小伙伴可以跟着B站上的视频相关视频学些一下，可以结合Github上面源代码参考学习，不过有一点就是B站上的视频的代码没有Github上面新。

02

vue-awesome-swiper的用法&同一页面有多个swiper如何使用

swiper.js 的vue版api跟cdn引入事一样的api用法，共用官网那套api文档，此篇写下时，swiper.js 的版本是 Swiper4.x 。这篇用的也是4.x的版本，注意swiper4.x跟swiper3.x的api用法有部分不同，详细请参考swiper官网。

01

Vue2.0 定制一款属于自己的音乐 WebApp

本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

05

swiper轮播图的使用

<swiper style="height:300px" :options="swiperOption" ref="mySwiper" id="swiper_container"> <swiper-slide class="box" v-for="(item,inde

03

Vue常用经典开源项目汇总参考

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

01

swiper轮播图的使用(转载)

<swiper style="height:300px" :options="swiperOption" ref="mySwiper" id="swiper_container"> <swiper-slide class="box" v-for="(item,inde

00

vue.js聊天IM系统|聊天室|群聊

基于vue+vuex+vue-router+webpack2.0+es6+wcPop+iconfont等技术开发的仿微信界面聊天室，之前使用h5开发过一版h5聊天室，实现了微信聊天功能、发送消息/表情，图片、视频预览，打赏、红包等功能。

05

轮播图swiper框架的基本使用

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

05

『UniApp』核心语法

下载地址：https://www.dcloud.io/hbuilderx.html

01

用vue实现一个虚拟列表

上次分享了超长列表分片加载的方式，这种方式现在一般不会使用，因为dom会变的无比庞大，页面会很卡，今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些。

01

公司内部技术分享会：复盘我的前端成长

首先先跟大家说声抱歉，本周连续接了几个广告金主的投放，如果投放课程对你们没用，或者没有一点价值，实在是叨扰各位了。不过，连帅张都说了，今年的大环境不是很乐观，适当恰饭，赚点小钱，很重要。

04

uni-app开发一个小视频应用(一)

“ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，是一种终极的跨平台解决方案，这里的平台，主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 ” 01 开发一个小视频应用一初始化项目打开HBuilderX IDE，新建一个名称为mini-video的初始化uni-app项目，这里勾选uni-app即可创建，项目创建完成后，打开pages

07

手牵手，使用uni-app从零开发一款视频小程序 (系列下开发实战篇)

相信你看到这篇文章的时候已经阅读了上篇文章的开发这个小程序的准备工作，如果你准备好了，那接下来让我们一起开始吧！

01

Nuxt引用vue-awesome-swiper轮播图

我安装的vue-awesome-swiper版本是4.1.1依赖swiper的版本是5.2.0 要注意swiper版本在plugins新建vue-awesome-swiper.js

03

uni-app黑魔法：小程序自定义组件运行到H5平台

移动互联网的初期，囿于设备硬件性能限制，流量以原生App为主，iOS、Android是当时两大平台。

02

前后端通吃，vue大全Mark一下

仓库地址：https://github.com/opendigg/awesome-github-vue

02

2016我的心路历程：从 Vue 到 Webpack 到 iView

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

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

03

三年项目升级Vue3的踩坑经历

我们组三年前开发了一套NoCode平台命名为米鹿平台，旨在提升运营生产力，目前这个系统的用户数一直维持在一个相对较高的水准，并且有越来越多的新用户加入，所以对该平台开放的能力要求就变高了许多。经过多次会议后，我们要将这个平台改造一下，可以接受外部组件，任何业务方的开发人员都可以给我们平台提供自定义组件，这样可以进一步提升开发和运营效率，充分发挥这个平台的作用。由于即将接入我们平台的多个业务方已经拥抱Vue3，所以我们决定将米鹿平台升级到Vue3。

02

vue2.0使用swiper

源自：http://blog.csdn.net/susuzhe123/article/details/69525609

04

前端Vue项目经验汇总

返回上一级页面 $router.back() $router:路由器对象，包含一些操作路由的功能函数，来实现编程式导航（路由跳转） $route:当前路由对象，一些当前路由信息数据的容器，path/meta/query/params

02

Nuxt项目中使用VueAwesomeSwiper

一定要看好swiper的版本和你的vue版本是否对应，不然铁定踩坑，本人就是这么过来的

03

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper？！

03

[Hot] Vue-cli 引入VueAwesomeSwiper

[Hot] Vue-cli 引入VueAwesomeSwiper Vue脚手架引入Swiper最新实操步骤: //npm npm install vue-awesome-swiper –save //可以全局 or 局部引用全局: //main.js import Vue from ‘vue’ import VueAwesomeSwiper from ‘vue-awesome-swiper’ import ‘./swiper4/swiper.css’ //这个css要去官网下载然后放进项目引入 Vue.u

03

vue项目中swiper动态更新后无法轮播问题附带案例代码

swiper是很常用的一个组件，我项目中用到的版本是4.1.6。刚开始，我就按照官网的案例写了个demo，当然图片都是静态写死的，确实可以轮播了，但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了，js和css是通过cdn引入的。下面是swiper的全部代码：有问题请加群交流java群：200909980，vue群：128806068 ，或者在下边评论 vue template 代码轮播内容是通过循环数组自动生成的 <div class="swiper-container" v-

04

vue项目简书(二)

网址: https://github.com/semlinker/reactjs-interview-questions

03

Vue 项目里戳中你痛点的问题及解决办法(上)

作者：愣锤 https://juejin.im/post/5b174de8f265da6e410e0b4e

04

谷粒学院整合NUXT

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

03

vue核心知识点

这段代码在运行之后会在控制台抛出错误,意思就是获取不到div元素，这里就涉及vue一个很重要的概念：异步更新队列

01

npm安装PYTHON env

最近拉了几个GitHub的项目，好多个安装依赖的时候就报错了，其中一个node-sass的我是真没想到。

02

Vue-travel学习笔记

minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" 阻止用户手滑发大缩小页面

01

JS-JavaScript类库整理 [更新中...]

http://www.bootcss.com/p/chart.js/docs/

02

Vue2.0 数据抓取及Swiper组件开发

本次的系列博解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

04

Vue 项目中各种痛点问题及方案

原文：https://juejin.im/post/6844903632815521799

02

实现一个Vue3版抖音滑动插件采坑指南！

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。

01

Vue3.0入门 + Vant3.0移动端实践（二）轮播图模块封装及首页完善

接着上一篇的来，上一篇介绍了环境搭建及做好了底部的导航栏模块，接下来继续完善首页。

02

VUE父组件向子组件传递数据

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。

06

vue系列教程之微商城项目|主页

1）安装axios，创建 'src/network/' 文件夹，用于集中存放数据请求代码

02

前端资源、交流社区、技术博客等整理总汇

最近看到这篇前端资源总汇的文章，整理的非常详细，于是搬过来，方便自己后期查阅，侵删。

00

微信小程序开发笔记

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭