关键词:
vue-awesome-swiper 使用(踩坑记录)
提示:
本文介绍是基于vue2.0实现,如果您是vue3.0建议直接去swiper上按照官方文档使用哦。
Swiper官方地址:https://www.swiper.com.cn/
一、vue-awesome-swiper的介绍
首先,Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
而vue-awesome-swiper则是一个大佬封装的关于Swiper的插件,能够帮助我们在vue的框架下更好地去使用Swiper实现轮播图的各种效果
二、实现效果
三、实现步骤(坑多!)
为了省略时间,不介绍有哪些坑了,直接说明如何使用。1.安装Swiper
// 版本问题!!大坑!vue中使用 swiper 需要使用 swiper 以及 vue-awesome-swipe
// 这两个的版本不能随意更改,有对应关系,我们只是为了实现效果,所以直接安装特定版本
npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save
2.注册swiper组件
这里使用局部注册的方法,实际应用可根据需求自行选择全局注册或局部注册
直接贴上我自定义的组件代码(根据官方文档更改的):
// 组件使用说明:
// 1、作用:含有缩略图和主图的组件
// 2、传入参数:这里为了看效果,暂时没写props传参,有不理解的可以搜索关于自定义组件中props的用法
<template>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
</swiper>
</div>
</template>
//js代码,可看注释,有更多的需求直接去官网看,文章后面有贴官网地址
<script>
import Swiper, SwiperSlide from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default
name: 'swiper-example-thumbs-gallery',
title: 'Thumbs gallery with Two-way control',
components:
Swiper,
SwiperSlide
,
data()
return
swiperOptionTop:
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
// 左右两边的点击事件
navigation:
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
,
swiperOptionThumbs:
loop: true, // 是否可循环
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10, // 缩略图之间的间隙大小
centeredSlides: true, // 大图对应的缩略图位置显示在中间
slidesPerView: 5, // 每一页显示下方缩略图的数量,auto :自动显示所有数量;输入number(如1、2、3等)则是手动定义显示的数量
touchRatio: 0.2, // 触控比例,可理解为拖动缩略图的距离,默认值为1
slideToClickedSlide: true //点击其他缩略图可跳转
;
,
mounted()
this.$nextTick(() =>
const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
);
;
</script>
//样式,自行更改即可
<style lang="less" scoped>
.thumb-example
width: 376px;
height: 376px;
background-color: #fff;
.swiper
margin-bottom: 10px;
.swiper-slide
// background-size: cover;
background-position: center;
&.slide-1
background-image: url('../../assets/TTImg/1.jpg'); //图片地址
&.slide-2
background-image: url('../../assets/TTImg/2.jpg'); //图片地址
&.slide-3
background-image: url('../../assets/TTImg/3.jpg'); //图片地址
&.slide-4
background-image: url('../../assets/TTImg/4.jpg'); //图片地址
&.slide-5
background-image: url('../../assets/TTImg/5.jpg'); //图片地址
&.gallery-top
height: 80%;
width: 100%;
&.gallery-thumbs
height: 20%;
width: 376px;
box-sizing: border-box;
padding: gap 0;
&.gallery-thumbs .swiper-slide //等比例缩小
opacity: 0.4;
height: 68px;
width: 68px;
border: 1px solid #eee;
background-size: contain;
&.gallery-thumbs .swiper-slide-active
opacity: 1;
</style>
到这里,基本效果已经搞定,建议时间赶就无需理解太深,需要啥就去文档看看提供的属性字段即可。
四、补充说明
-
需要其他效果可以自行看文档demo,查看对应代码块,粘贴代码即可
-
Demo文档地址:https://github.surmon.me/vue-awesome-swiper/
-
Swiper的API文档(可在这里查看需要的属性字段说明等):https://swiperjs.com/swiper-api
总结
官方文档是基于vue3的使用,但我们项目基于vue2,找了很多资料,踩了好久的坑,记录一下,希望对大家有所帮助。
vue-awesome-swipe基于vue使用的轮播组件使用
npm install vue-awesome-swiper --save //基于vue使用的轮播组件<template><swiper:options="swiperOption"ref="mySwiper"><swiper-slidev-for="(banner,index)inbanners":key="index"&g 查看详情
记使用vue-awesome-swiper遇到的一些问题
一、vue-awesome-swiper的使用 1、在项目中全局引用 importVueAwesomeSwiperfrom‘vue-awesome-swiper‘//requirestylesimport‘swiper/dist/css/swiper.css‘Vue.use(VueAwesomeSwiper/*defaultglobaloptions*/) 引入之 查看详情
vue-awesome-swiper的正确使用姿势
参考技术A介绍一下vue-awesome-swiper最靠谱的使用方法。目前网上对于vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,反正各种坑让人火大。下面介绍... 查看详情
基于 Vue2 类的数据属性不是反应式的
】基于Vue2类的数据属性不是反应式的【英文标题】:Vue2classbaseddatapropertyisnotreactive【发布时间】:2021-08-1412:07:18【问题描述】:我在基于vue2类的组件中使用typescript。使用自定义类型KeyValuePair时,sampleData属性在组件中不是响应... 查看详情
vue2.0实践——node+vue实现移动官网
...ps://github.com/wx1993/node-vue-fabaocn效果组件轮播图(使用 vue-awesome-swiper插件)新闻列表新闻详情职位列表联系我们页面(使用百度地图api)技术Express、Vue、Vue-Router、Vue-Resource、WebpackVuevue的组件化思想 查看详情
vue使用vue-awesome-swiper(基础版)(代码片段)
1.0安装vue-awesome-swiper(稳定版本2.6.7)npminstall[email protected]--save2.0引入配置(全局使用)2.1.0在main.js中配置importVueAwesomeSwiperfrom‘vue-awesome-swiper‘import‘swiper/dist/css/swiper.css‘Vue.use(VueAwesomeS 查看详情
vue-awesome-swiper使用教程
参考技术Agithub地址:https://github.com/surmon-china/vue-awesome-swiperⅠ.什么是Nuxt.js:Nuxt.js是一个基于Vue.js的通用应用框架,通过对客户端/服务端基础架构的抽象组织,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。(开箱即... 查看详情
vue中使用vue-awesome-swiper(代码片段)
一:首先进入项目目录中安装installvue-awesome-swiper@2.6.7--save2.使用全局挂载:importVuefrom‘vue‘importVueAwesomeSwiperfrom‘vue-awesome-swiper‘//requirestylesimport‘swiper/dist/css/swiper.css‘Vue.use(VueAwesomeSwiper,/*defaultglobaloptions*/)组件挂载//requirestyle... 查看详情
vue-awesome-swiper的使用(代码片段)
这是swiper专门为了vue开发出的插件,参数基本一样https://www.swiper.com.cn/ vue中使用npminstallvue-awesome-swiper组件中引入importSwiper,SwiperSlidefrom‘vue-awesome-swiper‘import‘swiper/css/swiper.css‘ <swiperref="c 查看详情
使用vue-awesome-swiper轮播插件总结
...试看官网文档,使用最新的版本。 1.首先下载swiper和vue-awesome-swipe。 下载我指定的版本,否则可能会打包错误。npminsta 查看详情
vue-awesome-swiper基本能解决你所有的轮播需求
...还可以的话,可以自己造个比较炫的轮子。这里我说一下vue-awesome-swiper这个轮播组件,真的非常强大,基本可以满足我们的轮播需求。swiper相信很多人都用过,很好用,也很方便我们二次开发,定制我们需要的轮播效果。vue-aweso... 查看详情
基于vue2.0的分页插件(很好用,很简单)
基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来。下载解压的主要目录是: Vue_Pagination... 查看详情
vue使用轮播图vue-awesome-swiper组件常用属性-swiper案例(代码片段)
vue-awesome-swiper安装npminstallvue-awesome-swiper@3引用/*全局引入*/importVueAwesomeSwiperfrom'vue-awesome-swiper';import"swiper/dist/css/swiper.css";//这里注意具体看使用的版本是否需要引入样式,以及具体位置Vu 查看详情
基于vue2-calendar改进的日历组件(含中文使用说明)(代码片段)
一,前言我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅……于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用... 查看详情
vue怎么挂载swiper
...基于Swiper的Vue组件,可以很方便地在Vue中使用swiper。使用vue-awesome-swiper插件:vue-awesome-swiper是一个基于Swiper的Vue组件,可以很方便地在Vue中使用swiper。手动挂载swiper:a.引入swiper的css和js文件。b.在Vue组件中手动初始化swiper实例。c.... 查看详情
vue的ssr的轮播图vue-awesome-swiper
...r模板创建,项目开发完成后,使用npmrungenerate轮播图插件:#vue-awesome-swiper参考地址npmjs的vue-awesome-swipergithub的vue-awesome-swiper操作:1,目前报错解决(对应plugin文件夹下的文件) 查看详情
基于vue2.0的在线电影app,
基于vue2.0构建的在线电影网【film】,webpack+vue+vuex+vue-loader+keepAlive+muse-ui+cordova全家桶,cordova打包成APP从零开始搭建,适合新手练手参考。GitHub地址,api来源于网上,仅供开发参考之用,禁用于商业,否则后果自负。在线demoapk安... 查看详情
基于vue2.0的一个豆瓣电影app
1、搭建项目框架使用vue-cli没安装的需要先安装npmintall-gvue-cli使用vue-cli生成项目框架vueinitwebpack-simplevue-movie然后一路回车接着进入项目目录cdvue-movie然后安装项目依赖包cnpminstall没安装cnpm的先执行这个命令npminstall-gcnpm--registry=http... 查看详情