vue的3d滑动插件(vue-carousel-3d)

文章目录

    • 安装
    • 全局引入
    • 局部引入
    • 模板内使用
    • 开发中做的一些个性化设置

vue的3d滑动插件(vue-carousel-3d)_第1张图片
vue-carousel-3d官网

安装

npm install -S vue-carousel-3d

全局引入

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);

局部引入

import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};

模板内使用


  
    Slide 1 Content
  
  
    Slide 2 Content
  

开发中做的一些个性化设置

1、因为有一个需求是左右切换的时候需要去做ajax请求拿数据做渲染,原本自带的onSlideChange是在切换动画完成后才调用(具体通过animationSpeed控制切换动画延时),找到对应的左右(前后)切换goNext、goPrev方法对应添加$emit
vue的3d滑动插件(vue-carousel-3d)_第2张图片
2、slide的个数显示问题
首次渲染的时候若是这个数组个数是请求回来的可能试图没有显示出来,可以通过v-if来处理
vue的3d滑动插件(vue-carousel-3d)_第3张图片

中途slide个数变化需要调用内部setSize方法
vue的3d滑动插件(vue-carousel-3d)_第4张图片

你可能感兴趣的:(框架/工具)