vue-keep-scroll-plugin

    0.0.2 • Public • Published

    支持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>

    Install

    npm i vue-keep-scroll-plugin

    DownloadsWeekly Downloads

    16

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar