相思资源网 Design By www.200059.com
本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下
一、体验地址
VUE 3D轮播图
二、实现功能点
(1)、无缝轮播
(2)、进入变大、离开缩小(类3d切换效果)
三、js代码
<!--轮播图插件模板--> <template> </template> <script type="text/ecmascript-6"> import {swiper, swiperSlide} from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css');//注意这里 import Pageination from "./pageination" import { mapActions, mapMutations, mapGetters, mapState} from "vuex" import {getPriceSymbolValue} from '../../util/tool/index' export default { //props: ['bannerList'], data() { let _self=this; return { pageinationIndex:0, data: { "bannerList":[] }, swiperOption: { loop: true, // 循环 speed:500, //切换速度 mousewheelControl: false,// 禁止鼠标滚轮切换 lazy: { loadPrevNext: true, }, pagination: { el: '.swiper-pagination', }, autoplay: { delay:2000, stopOnLastSlide: false, // 切换到最后一个时不停止 disableOnInteraction: false, //用户操作swiper之后 不停止autoplay }, watchSlidesProgress:true, centeredSlides: true, //设定为true时,活动块会居中,而不是默认状态下的居左。 spaceBetween:10, slidesPerView: 1.7, loopedSlides :2, observer: true, observeParents: true } } }, methods: { }, mounted() { // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.$nextTick(function() { // this.swiper.slideTo(3, 10, false); // }); }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, components: { swiper, swiperSlide, Pageination } } </script> <style lang="scss" type="text/scss"> </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,3D,轮播图
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无VUE 3D轮播图封装实现方法的评论...