A customizable, smooth-scroll scrollbar based on Vue.js. Supports pull-to-refresh and push-to-load.

README.md

Vuescroll

VersionBuild Status Coverage License Download prettier

Demo

Online Demo(Recommend to use mobile)

Introduction

Vuescroll is a full customizable scrollbar based on Vue.js, which spports pull-to-refresh and push-to-load. - vuescrolljs.yvescoding.org

It is compitable with both PC and mobile phone.

Detailed guides:

Quick Start & Examples

Browser environment(Basic Scroll, with scollButton)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.css"
    />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #app {
        width: 100%;
        height: 100%;
        text-align: center;
      }

      #parent {
        width: 400px;
        height: 400px;
        display: inline-block;
      }

      #child {
        width: 800px;
        height: 800px;
        background: -webkit-linear-gradient(left top, red, blue);
        /* Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom right, red, blue);
        /* Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue);
        /* Firefox 3.6 to 15 */
        background: linear-gradient(to bottom right, red, blue);
        /* 标准语法 */
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="parent">
        <vue-scroll :ops="ops"> <div id="child"></div> </vue-scroll>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          ops: {
            bar: {
              background: 'rgb(24, 144, 255)'
            },
            rail: {
              border: '1px solid #cecece',
              size: '20px'
            },
            scrollButton: {
              enable: true,
              background: '#cecece'
            }
          }
        }
      });
    </script>
  </body>
</html>

Browser environment(Basic Scroll, without scollButton)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.css"
    />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #app {
        width: 100%;
        height: 100%;
        text-align: center;
      }

      #parent {
        width: 400px;
        height: 400px;
        display: inline-block;
      }

      #child {
        width: 800px;
        height: 800px;
        background: -webkit-linear-gradient(left top, red, blue);
        /* Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom right, red, blue);
        /* Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue);
        /* Firefox 3.6 to 15 */
        background: linear-gradient(to bottom right, red, blue);
        /* 标准语法 */
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="parent">
        <vue-scroll :ops="ops"> <div id="child"></div> </vue-scroll>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          ops: {
            bar: {
              background: 'rgb(24, 144, 255)'
            }
          }
        }
      });
    </script>
  </body>
</html>

Browser environment(Pull to refresh, push to load)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.css"
    />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #app {
        width: 100%;
        height: 100%;
        text-align: center;
      }

      #parent {
        width: 400px;
        height: 400px;
        display: inline-block;
      }

      .child {
        width: 400px;
        height: 400px;
        background: -webkit-linear-gradient(left top, red, blue);
        /* Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom right, red, blue);
        /* Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue);
        /* Firefox 3.6 to 15 */
        background: linear-gradient(to bottom right, red, blue);
        /* 标准语法 */
      }

      .child:not(:first-child) {
        margin-top: 10px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="parent">
        <vue-scroll
          :ops="ops"
          @load-start="ls"
          @refresh-start="rs"
          @load-before-deactivate="lBD"
        >
          <div class="child" v-for="i in dataNum" :key="i"></div>
        </vue-scroll>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          dataNum: 1,
          ops: {
            vuescroll: {
              mode: 'slide',
              pullRefresh: {
                enable: true
              },
              pushLoad: {
                enable: true
              }
            },
            bar: {
              background: 'rgb(24, 144, 255)'
            }
          }
        },
        methods: {
          ls(vs, refrehDom, done) {
            let vm = this;
            // fake fetching data...
            setTimeout(() => {
              // Must call done, to let vuescroll know
              // you have finished working.
              done();

              // Assume we have fetched the data, In order to
              // let user see the tip of the result. We don't
              // increase data immediately, instead, we put data
              // into a tempory variable.
              vm.receiveData = 1;
            }, 500);
          },
          lBD(vs, refrehDom, done) {
            const tipTime = 500;
            const vm = this;

            setTimeout(() => {
              vm.dataNum += vm.receiveData || 0;
              // Must call done, to let vuescroll know
              // you have finished working.
              done();
            }, tipTime);
          },
          rs(vs, refrehDom, done) {
            this.refresh();
            done();
          },
          refresh() {
            this.dataNum = 1;
          }
        }
      });
    </script>
  </body>
</html>

Communication

For bug report or feature request, you can raise an issue or twitter @wangyi70991

Scan the QR code to join the WeChat group

Demo

License

MIT