vue-keep-scroll-plugin

latest

Source

npm

Version: 0.0.2

Version published: 9 years ago

Maintainers: 1

Created: 9 years ago

Source

支持vuejs(version >= 2.0)记住任意滚动元素的滚动位置

Installation

via CDN

  <script src="https://unpkg.com/vue-keep-scroll-plugin/dist/vue-keep-scroll-plugin.min.js"></script>

via NPM

$ npm install vue-keep-scroll-plugin --save # Or
$ yarn add vue-keep-scroll-plugin

  // main.js
  import Vue from "vue";
  import VueKeepScrollPlugin from "vue-keep-scroll-plugin";
  Vue.use(VueKeepScrollPlugin);

Simple example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/vue-keep-scroll-plugin/dist/vue-keep-scroll-plugin.min.js"></script>
  <style>
    .container {
      height: 500px;
      width: 100%;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
  <template id="index">
    <div>
      <h1>this is index page</h1>
      <router-link to="/list">go to list</router-link>
      <div v-keep-scroll class="container">
        <p v-for="n of 100">{{ n }}</p>
      </div>
    </div>
  </template>
  <template id="list">
    <div>
      <h1>this is list page</h1>
      <router-link to="/">go to index</router-link>
      <div v-keep-scroll class="container">
        <p v-for="n of 100">{{ n }}</p>
      </div>
    </div>
  </template>
  <script>
    Vue.use(VueRouter);
    Vue.use(vueKeepScrollPlugin);
    var router = new VueRouter({
      routes: [{
        path: "/",
        component: { template: "#index" }
      }, {
        path: "/list",
        component: { template: "#list" }
      }]
    });
    new Vue({
      el: "#app",
      router
    })
  </script>
</body>

</html>

Keywords

FAQs

What is vue-keep-scroll-plugin?

Is vue-keep-scroll-plugin well maintained?

Package last updated on 19 Feb 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install