应用程序上创建多个粘性标题– vuesence-sliding-header

应用程序上创建多个粘性标题– vuesence-sliding-header

插件名称:vuesence-sliding-header

发布时间:2020年7月8日

插件作者:altrusl

官网 演示 GitHub下载

一个非常酷的Vue.js组件,允许在页面滚动中使用多个粘性标头元素(例如,用于不同部分的导航栏)。

安装和下载:

# NPM
$ npm i @vuesence/sliding-header --save

如何使用它:

1.导入vuesence-sliding-header组件。

import SlidingHeader from "@vuesence/sliding-header";

2.注册组件。

export default {
  name: "App",
  components: {
    SlidingHeader
  }        
};

3.将粘性标头添加到模板。

<template>
  <div id="app">
    <sliding-header :threshold-hide="200" :threshold-open="400">
      <template v-slot:first-header>
        <p>The First Header</p>
      </template>
      <template v-slot:second-header>
        <p>The Second Header</p>
      </template>
    </sliding-header>
  </div>
</template>
相关插件