加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

VUE 3D轮播图封装实现方法

发布时间:2020-12-17 03:10:00 所属栏目:百科 来源:网络整理
导读:本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 (1)、无缝轮播 (2)、进入变大、离开缩小(类3d切换效果) 三、js代码 script type="text/ecmascript-6" import {swiper,swiperSlide}

本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下

一、体验地址

VUE 3D轮播图

二、实现功能点

(1)、无缝轮播 (2)、进入变大、离开缩小(类3d切换效果)

三、js代码

<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
}
}

<style lang="scss" type="text/scss">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读