vue具有自动捕捉功能的一页滚动– vue-scroll-snap

vue具有自动捕捉功能的一页滚动– vue-scroll-snap
插件名称 vue-scroll-snap
发布时间 2020年11月29日
插件作者 angelomelonas

Scroll Snap是一个Vue.js应用程序,用于创建具有滚动捕捉功能的单页滚动网站或单页Web应用程序。

在滚动页面时,页面将自动捕捉到下一个或上一个页面部分。

安装和下载:

# NPM
$ npm install vue-scroll-snap --save

变更日志:

2020年11月28日

  • v0.1.10:更新了依赖性。

2020年8月20日

  • v0.1.9

2020年8月13日

  • 更新了依赖性。

如何使用它:

1.导入并注册组件。

import VueScrollSnap from "vue-scroll-snap";
export default {
  components: {VueScrollSnap},
};

2.在您的应用程序模板中创建组件,然后将页面部分插入文档中。

<template>
  <vue-scroll-snap>
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

3.启用全屏页面滚动。

<template>
  <vue-scroll-snap :fullscreen="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

4.启用水平页面滚动。

<template>
  <vue-scroll-snap :horizontal="true">
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>