sphere-scroll

一个基础的Vue 3D滑动组件

示例

安装

npm install sphere-scroll

Quick Start

import SphereScroll from "sphere-scroll";

<sphere-scroll
  :dataList="dataList" 
  @selectChange="onSelectChange" 
  :viewHeight="300" 
  :itemHeight="35"
  :viewWidth="300"
>

通过 demo 代码了解更多。

Porps

porps	描述	Type	Default
viewHeight	组件的高度	string/number	350
viewWidth	组件的宽度	string/number	300
itemHeight	item的高度	string/number	40
dataList	需要展示的数据	array	-

Events

Event	描述	参数
selectChange	当滑动时选择的item改变时触发	选中的index

Methods

Method	描述	参数
setSeclectIndex	设置选择的下标	index

Slots

你同样可以用 slot 来自己编写item的内容：

<template v-slot:item="{ item }">
  <div class="listItem">
    {{ item }}
  </div>
</template>

源码

github.com/yangdiei/sp…