脚本宝典收集整理的这篇文章主要介绍了

vue2.0中使用swiper插件 vue-awesome-swiper指南

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>在使用vue.js开发时,使用官方vue-cli开发时用上了轮播插件swiper,总结了一下swiper使用时遇到的问题:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="最好的老师来自于官方文档:附上vue-awesome-swiper在git上的地址以及安装过程 https://www.npmjs.com/package/vue-awesome-swiper" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>最好的老师来自于官方文档:附上vue-awesome-swiper在git上的地址以及安装过程 <span class="hljs-string">https:</span><span class="hljs-comment">//www.npmjs.com/package/vue-awesome-swiper</span></code></pre> <p>下面我来概述一下整体使用操作:<br />一 首先讲下安装:<br />通过npm安装: npm install vue-awesome-swiper --save</p> <p>二 在vue项目中找到main.js添加:<br />import 'swiper/dist/css/swiper.css'<br />//(如果使用的是2.6.0以上的版本需要自己手动去加载css)<br />import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>AwesomeSwiper from 'vue-awesome-swiper'<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>AwesomeSwiper)<br />三 运用到组件中,出问题最多的地方:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;scroll&quot;> <swiper :options=&quot;swiperOption&quot; ref=&quot;mySwiper&quot;><br /> <!-- slides --><br /> <swiper-slide>I'm Slide 1</swiper-slide><br /> <swiper-slide>I'm Slide 2</swiper-slide><br /> <swiper-slide>I'm Slide 3</swiper-slide><br /> <swiper-slide>I'm Slide 4</swiper-slide><br /> <!-- Optional controls --></p> <div class=&quot;swiper-pagination &quot; slot=&quot;pagination&quot;></div> <div class=&quot;swiper-button-prev swiper-button-black&quot; slot=&quot;button-prev&quot;></div> <div class=&quot;swiper-button-next swiper-button-black&quot; slot=&quot;button-next&quot;></div> <p> <!-- <div class=&quot;swiper-scrollbar&quot; slot=&quot;scrollbar&quot;></div> --><br /> </swiper> </div> <p></template></p> <p><script> import { swiper, swiperSlide } from 'vue-awesome-swiper' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'HelloWorld', components: { swiper, swiperSlide }, data () { return { swiperOption: { notNextTick: true, //循环 loop:true, //设定初始化时slide的索引 initialSlide:0, //自动播放 autoplay:true, // autoplay: { // delay: 3000, // stopOnLastSlide: false, // disableOnInteraction: true, // }, // 设置轮播 effect : 'flip', //滑动速度 speed:800, //滑动方向 direction : 'horizontal', //小手掌抓取滑动 // grabCursor : true, //滑动之后回调函数 on: { slideChangeTransitionEnd: function(){ // console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.activeIndex);//切换结束时,告诉我现在是第几个slide }, }, //左右点击 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, //分页器设置 pagination: { el: '.swiper-pagination', clickable :true } }, swiperSlides: [1, 2, 3, 4] } }, computed: { swiper() { return <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$refs.mySwiper.swiper; } }, mounted () { //可以使用swiper这个对象去使用swiper官网中的那些方法 console.log('<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> is current swiper instance object', this.swiper); // this.swiper.slideTo(0, 0, false); } } </script></p> <p><!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --></p> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .swiper-slide{ height:200px; }</p> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"scroll"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">swiper</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"swiperOption"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"mySwiper"</span>&gt;</span> <span class="hljs-comment">&lt;!-- slides --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">swiper-slide</span>&gt;</span>I'm Slide 1<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-slide</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">swiper-slide</span>&gt;</span>I'm Slide 2<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-slide</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">swiper-slide</span>&gt;</span>I'm Slide 3<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-slide</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">swiper-slide</span>&gt;</span>I'm Slide 4<span class="hljs-tag">&lt;/<span class="hljs-name">swiper-slide</span>&gt;</span> <span class="hljs-comment">&lt;!-- Optional controls --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-pagination "</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"pagination"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-button-prev swiper-button-black"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"button-prev"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"swiper-button-next swiper-button-black"</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"button-next"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-comment">&lt;!-- &lt;div class="swiper-scrollbar" slot="scrollbar"&gt;&lt;/div&gt; --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">swiper</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> { swiper, swiperSlide } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-awesome-swiper'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWorld'</span>, <span class="hljs-attr">components</span>: { swiper, swiperSlide }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">swiperOption</span>: { <span class="hljs-attr">notNextTick</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//循环</span> loop:<span class="hljs-literal">true</span>, <span class="hljs-comment">//设定初始化时slide的索引</span> initialSlide:<span class="hljs-number">0</span>, <span class="hljs-comment">//自动播放</span> autoplay:<span class="hljs-literal">true</span>, <span class="hljs-comment">// autoplay: {</span> <span class="hljs-comment">// delay: 3000,</span> <span class="hljs-comment">// stopOnLastSlide: false,</span> <span class="hljs-comment">// disableOnInteraction: true,</span> <span class="hljs-comment">// },</span> <span class="hljs-comment">// 设置轮播</span> effect : <span class="hljs-string">'flip'</span>, <span class="hljs-comment">//滑动速度</span> speed:<span class="hljs-number">800</span>, <span class="hljs-comment">//滑动方向</span> direction : <span class="hljs-string">'horizontal'</span>, <span class="hljs-comment">//小手掌抓取滑动</span> <span class="hljs-comment">// grabCursor : true,</span> <span class="hljs-comment">//滑动之后回调函数</span> on: { <span class="hljs-attr">slideChangeTransitionEnd</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">// console.log(this.activeIndex);//切换结束时,告诉我现在是第几个slide</span> }, }, <span class="hljs-comment">//左右点击</span> navigation: { <span class="hljs-attr">nextEl</span>: <span class="hljs-string">'.swiper-button-next'</span>, <span class="hljs-attr">prevEl</span>: <span class="hljs-string">'.swiper-button-prev'</span>, }, <span class="hljs-comment">//分页器设置 </span> pagination: { <span class="hljs-attr">el</span>: <span class="hljs-string">'.swiper-pagination'</span>, <span class="hljs-attr">clickable</span> :<span class="hljs-literal">true</span> } }, <span class="hljs-attr">swiperSlides</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>] } }, <span class="hljs-attr">computed</span>: { swiper() { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.$refs.mySwiper.swiper; } }, mounted () { <span class="hljs-comment">//可以使用swiper这个对象去使用swiper官网中的那些方法 </span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'this is current swiper instance object'</span>, <span class="hljs-keyword">this</span>.swiper); <span class="hljs-comment">// this.swiper.slideTo(0, 0, false);</span> } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Add "scoped" attribute to limit <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> to this component only --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span> { <span class="hljs-attribute">font-weight</span>: normal; } <span class="hljs-selector-tag">ul</span> { <span class="hljs-attribute">list-style-type</span>: none; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>; } <span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#42b983</span>; } <span class="hljs-selector-class">.swiper-slide</span>{ <span class="hljs-attribute">height</span>:<span class="hljs-number">200px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>1 分页器点击小圆点跳转到对应页面不能与设置抓手grabCursor : true同时设置<br />2 vue-awesome-swiper基于组件的开发设置分页器和上一页下一页按钮,采取下列方式定义:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" //左右点击 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, //分页器设置 pagination: { el: '.swiper-pagination', clickable :true }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code> <span class="hljs-comment">//左右点击</span> <span class="hljs-symbol"> navigation:</span> { <span class="hljs-symbol"> nextEl:</span> <span class="hljs-string">'.swiper-button-next'</span>, <span class="hljs-symbol"> prevEl:</span> <span class="hljs-string">'.swiper-button-prev'</span>, }, <span class="hljs-comment">//分页器设置 </span> <span class="hljs-symbol"> pagination:</span> { <span class="hljs-symbol"> el:</span> <span class="hljs-string">'.swiper-pagination'</span>, <span class="hljs-string">clickable :</span><span class="hljs-literal">true</span> }</code></pre> <p>3 自动轮播autoplay:true与swiper中方法slideTo(0, 0, false)不能同时设置,自动轮播会失效</p> <p>具体的swiper设置属性可以查看中文<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>文档:<a href="http://www.swiper.com.cn/api" rel="nofollow noreferrer" target="_blank">http://www.swiper.com.cn/api</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue2.0中使用swiper插件 vue-awesome-swiper指南

全部内容,希望文章能够帮你解决

vue2.0中使用swiper插件 vue-awesome-swiper指南

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过