vue-swipe-3d

基于Vue的图片3d轮播

安装

$ npm install vue-swipe-3d -S

使用

在 main.js 文件中引入插件并注册

# main.js
import 'vue-swipe-3d/src/swipe-3d.css'
import swipe3d from 'vue-swipe-3d'
Vue.use(swipe3d)

在项目中使用 vue-swipe-3d

<template>
  <div>
    <swipe-3d :data="data" @click="handleClick" @change="handleChange"/>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      data: [
        'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG1.jpeg',
        'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG2.jpeg',
        'http://dev-public-bucket.oss-cn-shanghai.aliyuncs.com/webapp/temp/WechatIMG3.jpeg'
      ]
    }
  },
  methods:{
    //点击当前显示时触发
    handleClick(activeItem){
      console.log(activeItem)
    },
    //当前显示的图片切换时触发
    handleChange(activeItem){
      console.log(activeItem)
    },
  }
}
</script>

特点

1. 简单易用 3D轮播效果
2. 提供以 npm 的形式安装提供全局组件

选项

暂时支持以下事件

1. click：点击当前显示的图片时触发
2. change：当图片切换时触发