Vue keep scroll plugin

vue-keep-scroll-plugin

Version: 0.0.2 Updated: 02/19/2017

By: shmy License: MIT

Downloads Last 30 Days: 29

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

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>
Categories: Vue js