关键词:
使用新版vue-awesome-swiper出现了一些bug
vue-awesome-swiper组件pagination小圆点不显示问题
不会自动播放
swiper没有css
参考如下配置
基本使用方法
1.安装
cnpm install vue-awesome-swiper --save
2.引用
/*全局引入*/ import VueAwesomeSwiper from ‘vue-awesome-swiper‘ import ‘swiper/dist/css/swiper.css‘//这里注意具体看使用的版本是否需要引入样式,以及具体位置。 Vue.use(VueAwesomeSwiper, /* default global options */) /*组件方式引用*/ import ‘swiper/dist/css/swiper.css‘////这里注意具体看使用的版本是否需要引入样式,以及具体位置。 import swiper, swiperSlide from ‘vue-awesome-swiper‘ export default components: swiper, swiperSlide
3.使用
<swiper :options="swiperOption"> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> <swiper-slide><img src="static/images/jay.jpg"></swiper-slide> </swiper> <!--以下看需要添加--> <div class="swiper-scrollbar"></div> //滚动条 <div class="swiper-button-next"></div> //下一项 <div class="swiper-button-prev"></div> //上一项 <div class="swiper-pagination"></div> //标页码
data() return swiperOption: notNextTick: true, // notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true autoplay: delay: 1000, //自动切换的时间间隔,单位ms stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换 stopOnLastSlide: true, //如果设置为true,当切换到最后一个slide时停止自动切换。 disableOnInteraction: false, //用户操作swiper之后,是否禁止autoplay。 reverseDirection: false, //开启反向自动轮播。 waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。 , loop: true, direction: ‘horizontal‘, grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: el: ‘.swiper-pagination‘ , centeredSlides: true, paginationClickable: true, navigation: nextEl: ‘.swiper-button-next‘, prevEl: ‘.swiper-button-prev‘ , keyboard: true, mousewheelControl: true, observeParents: true, // 如果自行设计了插件,那么插件的一些配置相关参数,也应该出现在这个对象中,如下debugger debugger: true ,
4.可选参数
fadeEffect: crossFade: false, cubeEffect: slideShadows: true, //开启slide阴影。默认 true。 shadow: true, //开启投影。默认 true。 shadowOffset: 100, //投影距离。默认 20,单位px。 shadowScale: 0.6 //投影缩放比例。默认0.94。 , coverflowEffect: rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。 stretch: 10, //每个slide之间的拉伸值,越大slide靠得越紧。 默认0。 depth: 60, //slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。 modifier: 2, //depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。 slideShadows : true //开启slide阴影。默认 true。 , flipEffect: slideShadows : true, //slides的阴影。默认true。 limitRotation : true, //限制最大旋转角度为180度,默认true。 zoom: maxRatio: 5, //最大倍数 minRatio: 2, //最小倍数 toggle: false, //不允许双击缩放,只允许手机端触摸缩放。 containerClass: ‘my-zoom-container‘, //zoom container 类名 , navigation: nextEl: ‘.swiper-button-next‘, //前进按钮的css选择器或HTML元素。 prevEl: ‘.swiper-button-prev‘, //后退按钮的css选择器或HTML元素。 hideOnClick: true, //点击slide时显示/隐藏按钮 disabledClass: ‘my-button-disabled‘, //前进后退按钮不可用时的类名。 hiddenClass: ‘my-button-hidden‘, //按钮隐藏时的Class , pagination: el: ‘.swiper-pagination‘, type: ‘bullets‘, //type: ‘fraction‘, //type : ‘progressbar‘, //type : ‘custom‘, progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反 bulletElement : ‘li‘, //设定分页器指示器(小点)的HTML标签。 dynamicBullets: true, //动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏。 dynamicMainBullets: 2, //动态分页器的主指示点的数量 hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。 clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 , scrollbar: el: ‘.swiper-scrollbar‘, hide: true, //滚动条是否自动隐藏。默认:false,不会自动隐藏。 draggable: true, //该参数设置为true时允许拖动滚动条。 snapOnRelease: true, //如果设置为false,释放滚动条时slide不会自动贴合。 dragSize: 30, //设置滚动条指示的尺寸。默认‘auto‘: 自动,或者设置num(px)。 ,
偶遇vue-awesome-swiper的坑(代码片段)
...UI库,纯手写的样式,沿用老的插件,自然而然的选择了vue-awesome-swiper(3.1.3)最新版,记不清上次用这个插件多久了,现在用来竟遇到很多坑,今晚闲暇以此记录,帮助大家避免踩坑。1.轮播图不轮播这个原因有很多,首先要检查... 查看详情
vue-awesome-swiper的正确使用姿势
参考技术A介绍一下vue-awesome-swiper最靠谱的使用方法。目前网上对于vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,反正各种坑让人火大。下面介绍... 查看详情
vue3.0多页面应用如何做seo?
公司项目,用的VUE框架,做了多页面应用,现在要做SEO,请问如何实现?预渲染用过,可能方法问题,只能渲染首页,其他页面都失败。参考技术A公司项目,用的VUE框架,做了多页面应 查看详情
vue3.0脚手架为啥一引入iview就报错
...e_modules/_iview@3.4.0@iview/dist/iview.js'参考技术A还没有支持vue3.0 参考技术Bue的ui框架iview一定要配合webpack用吗?webpackiviewvue.js新...新手真心吐槽一下,iview的脚手架工具用npmruninit各种报错,官方也不指导一下...天津众维原画设计提供 查看详情
vue3.0+vite实现移动端自适应布局
参考技术A然后再main.ts中引入amfe-flexible最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可 查看详情
vue3.0源码系列响应式原理-reactivity(代码片段)
更多vue3源码分析尽在:www.cheng92.com/vue该系列文章,均以测试用例通过为基准一步步实现一个vue3源码副本(学习)。文字比较长,如果不想看文字可直接转到这里看脑图简介reactivity是vuenext里面通过proxy+reflect实现的响... 查看详情
[浅析]vue3.0中的自定义渲染器(代码片段)
Vue3.0中支持自定义渲染器(Renderer):这个API可以用来自定义渲染逻辑。它可以将VirtualDOM渲染为Web平台的真实DOM。(在以往像weex和mpvue,需要通过fork源码的方式进行扩展)。1.自定义渲染器的原理渲染器是围绕VirtualD... 查看详情
vue3.0结合bootstrap做多页面应用创建项目
...vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquery,也可以给有需要的同行做个参考。1.首先用vue--version命令查一下安装的vue-cli版本,要3.x版本,我... 查看详情
同一电脑上安装且使用vue2.0和vue3.0版本(代码片段)
问题:想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现?方法:第一步:卸载全局安装的vue版本。(注:自行百度搜索如何卸载全局vue2vue3脚手架)第二步:在自己想要的位置... 查看详情
vue3.0配置vue-i18n
项目安装vue-i18n需要安装最新版的vue-i18nnpminstallvue-i18n@next--save或者用yarnyarnaddvue-i18n@next--save安装完成之后,可以看一下package.json文件;看是否是最新版的vue-i18n,我安装的是9.1.7。在项目src文件夹中新建lang文件夹新建lang文件夹,... 查看详情
vue3.0源码系列响应式原理-reactivity(代码片段)
更多vue3源码分析尽在:www.cheng92.com/vue该系列文章,均以测试用例通过为基准一步步实现一个vue3源码副本(学习)。文字比较长,如果不想看文字可直接转到这里看脑图简介reactivity是vuenext里面通过proxy+reflect实现的响... 查看详情
vue3.0需要学习的技术栈
相关库名称在线地址🔗Vue3.0官方文档(英文)在线地址Vue3.0中文文档在线地址国内加速版Composition-API手册在线地址Vue3.0源码学习在线地址Vue-Router官方文档在线地址Vuex4.0Githubvue-devtoolsGithub(Vue3.0需要使用最新版本)Vite源码学习线... 查看详情
vue3.0的基础学习
基于Vuecli的Vue3.0初体验 查看详情
vue3.0的基础学习
基于Vuecli的Vue3.0初体验 查看详情
vue3.0的基础学习
基于Vuecli的Vue3.0初体验 查看详情
vue3简介——升级vue的版本vue2.9.6升级到vue3.0——创建vue3.0工程-——vue3_devtool开发者工具的下载安装(代码片段)
vue3简介——升级Vue的版本vue2.9.6升级到vue3.0——创建Vue3.0工程1.Vue3简介2.Vue3带来了什么1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性3.升级Vue的版本vue2.9.6升级到vue3.0创建Vue3.0工程1.使用vue-cli创建2.使用vite创建关闭eslint语法... 查看详情
vue3.0和2.0的差异
参考技术A对比学习2.0和3.0并记录学习收获:·3.0比2.0快2倍· 3.0去掉了filter,么有beforeCreatecreated,用setup取代·reactivity是可以单独作为库使用的 ·单独功能可以抽离取代了mixin 优于mixin解决上下反复横跳·支持多个子节点frag... 查看详情
vue3.0项目天时分秒倒记计时功能(代码片段)
废话不多说,先来上图,看看需求和你们的一样不,可以用的话,一键三连,谢谢 <template><divclass="iss-count"><divclass="count-title">距离直播开始</div><divclass="count-time"><divclass="time-number"> 查看详情