vue 列表滑动_滑动式卡带传送带，可通过Vue查看列表

vue 列表滑动

Vue卡轮播 (Vue Card Carousel)

Sliding card carousel for list viewing.

滑动卡传送带，可用于查看列表。

*Please note this is in active development and subject to change until it is out of alpha versions.

*请注意，这是在积极的开发中，并且可能会有所更改，直到超出alpha版本为止。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

npm i vue-card-carousel

You can choose to install either globally or locally:

您可以选择在全局或本地安装：

Globally:

全球范围内：

import Vue from 'vue'
import App from './App.vue'
import VueCardCarousel from "vue-card-carousel";

Vue.use(VueCardCarousel)

new Vue({
  el: '#app',
  render: h => h(App)
})

or locally to a component:

或局部于组件：

import { VueCardCarousel } from "vue-card-carousel";

export default {
    components: {
        VueCardCarousel
    }
}

用法 (Usage)

Most basic usage would be adding the component and passing in the array of items you want displayed. Note you will need to set the minimum height of the component, otherwise it won't display. The width will take up 100% by default. These can be easily configured via CSS.

最基本的用法是添加组件并传入要显示的项目数组。 请注意，您将需要设置组件的最小高度，否则它将不会显示。 默认情况下，宽度将占100％。 这些可以通过CSS轻松配置。

<template>
  <div id="app">
    <VueCardCarousel class="vcc" :items="listOfTodos" />
  </div>
</template>

<script>
import { VueCardCarousel } from "vue-card-carousel";

export default {
  components: {
    VueCardCarousel
  },
  data() {
    return {
      listOfTodos: [{ id: 1 }, { id: 2 }, { id: 3 }]
    };
  }
};
</script>

<style scoped>
  .vcc {
    height: 50vh;
    width: 60vw;
  }
</style>

However this will be relatively uninteresting. To make the most use of this component, you'll want to add customizations via props and slots like below:

但是，这将相对没有意思。 为了充分利用此组件，您需要通过以下道具和插槽添加自定义项：

<template>
  <div id="app">
    <VueCardCarousel
      class="vcc"
      :items="listOfTodos"
      :header-options="headerOpt"
      :footer-options="footerOpt"
    >
      <template v-slot:header="slotProps">
        <strong>Header. Id: {{ slotProps.headerProp.id }}</strong>
      </template>
      <template v-slot:default="slotProps">
        <div v-for="n in 5" :key="n">
          {{ slotProps.bodyProp.cMainId }}. Hello from the Parent.
        </div>
      </template>
      <template v-slot:footer="slotProps">
        <strong>Footer. Id: {{ slotProps.footerProp.id }}</strong>
      </template>
    </VueCardCarousel>
  </div>
</template>

<script>
import { VueCardCarousel } from "vue-card-carousel";

export default {
  components: {
    VueCardCarousel
  },
  data() {
    return {
      listOfTodos: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
      headerOpt: { isVisible: true, backgroundColor: "green" },
      footerOpt: { isVisible: false }
    };
  }
};
</script>

<style scoped>
  .vcc {
    height: 50vh;
    width: 60vw;
  }
</style>

道具 (Props)

Property	Type	Default	Required	Description
items	Array		true	List of items to used to generate the scrollable cards.
startIndex	Number	0	false	Index of the card you want to be centered on first. Removes trailing digits if found.
hideBackdrop	Boolean	false	true	Shows/hides the backdrop. Akin to a modal backdrop.
sideCardOpacity	Number	0.25	false	Sets the minimum opacity for the cards on either side of the center card.
headerOptions	Object		false	See details below for available properties.
footerOptions	Object		false	See details below for available properties.

属性	类型	默认	需要	描述
items	数组		真正	用于生成可滚动卡的项目列表。
startIndex	数	0	假	您要首先居中的卡的索引。 删除尾随的数字(如果找到)。
hideBackdrop	布尔型	假	真正	显示/隐藏背景。 类似于模态背景。
sideCardOpacity	数	0.25	假	设置中心卡两侧的卡的最小不透明度。
headerOptions	目的		假	有关可用属性，请参见下面的详细信息。
footerOptions	目的		假	有关可用属性，请参见下面的详细信息。

headerOptions (headerOptions)

Property	Type	Default	Required	Description
isVisible	Boolean		true	Controls whether or not the header is displayed.
backgroundColor	String		false	Any valid CSS color.

属性	类型	默认	需要	描述
isVisible	布尔型		真正	控制是否显示标题。
backgroundColor	串		假	任何有效CSS颜色。

footerOptions (footerOptions)

Property	Type	Default	Required	Description
isVisible	Boolean		true	Controls whether or not the footer is displayed.
backgroundColor	String		false	Any valid CSS color.

属性	类型	默认	需要	描述
isVisible	布尔型		真正	控制是否显示页脚。
backgroundColor	串		假	任何有效CSS颜色。

插槽 (Slots)

Scoped slots are exposed for each sub-section of the card: header, body, and footer. Each slot has slot props which give access to the individual item from the list that was passed in through the items property, so you can use that data to fully customize the card.

卡的每个子部分都暴露了适用的插槽：页眉，正文和页脚。 每个插槽都有插槽道具，通过这些道具可以访问通过items属性传递的列表中的单个项目，因此您可以使用该数据完全自定义卡。

Name	Description	Scope
header	Individual item from the list passed in through the items prop.	headerProp
default	Individual item from the list passed in through the items prop.	bodyProp
footer	Individual item from the list passed in through the items prop.	footerProp

名称	描述	范围
header	列表中的单个项目通过items属性传递。	headerProp
default	列表中的单个项目通过items属性传递。	bodyProp
footer	列表中的单个项目通过items属性传递。	footerProp

In the above example, we have named the object containing all our slot props slotProps, but you can choose to call this anything. More info can be found here: https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

在上面的示例中，我们已命名包含所有插槽道具slotProps的对象，但是您可以选择将其命名为任何对象。 可以在此处找到更多信息： https : //vuejs.org/v2/guide/components-slots.html#Scoped-Slots

翻译自: https://vuejsexamples.com/sliding-card-carousel-for-list-viewing-with-vue/

vue 列表滑动