zoukankan      html  css  js  c++  java
  • Vue 下拉刷新及无限加载组件

    Vue Scroller

    Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

    Demo

    Change Logs

    • v0.3.9 add getPosition method for scroller instance.
    • v0.3.8 fix bug
    • v0.3.7 publish bower version
    • v0.3.6 support mouse events
    • v0.3.4 change required property 'delegate-id' to non-required.
    • v0.3.3 support multi scrollers in one page.

    How To Use

    Step 1: create vue project and install vue-scroller via npm. (we use vue webpack-simple template here)

    $ vue init webpack-simple#1.0 my-project
    $ cd my-project
    $ npm install
    $ npm install vue-scroller

    Step 2: add resolve option and loader in webpack.config.js as below.

    module.exports = {
      // ...
    
      resolve: {
        extensions: ['', '.js', '.vue'],
        fallback: [path.join(__dirname, './node_modules')]
      },
    
      // ...
    
      module: {
        loaders: [
          // ...
    
          {
            test: /vue-scroller.src.*?js$/,
            loader: 'babel'
          }
        ]
      },
    
      // ...
    
    }

    Step 3: copy codes below to overwrite App.vue

    <template>
      <scroller delegate-id="myScroller"
                :on-refresh="refresh"
                :on-infinite="loadMore"
                v-ref:my_scroller>
        <div v-for="(index, item) in items" @click="onItemClick(index, item)"
             class="row" :class="{'grey-bg': index % 2 == 0}">
          {{ item }}
        </div>
      </scroller>
    </template>
    
    <script>
      import Scroller from 'vue-scroller'
    
      export default {
        components: {
          Scroller
        },
    
        data () {
          return {
            items: []
          }
        },
    
        ready() {
    
          for (let i = 1; i <= 20; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
          }
          this.top = 1
          this.bottom = 20
    
          setTimeout(() => {
            /* 下面2种方式都可以调用 resize 方法 */
            // 1. use scroller accessor
            $scroller.get('myScroller').resize()
    
            // 2. use component ref
            // this.$refs.my_scroller.resize()
          })
        },
    
        methods: {
          refresh() {
            setTimeout(() => {
              let start = this.top - 1
    
              for (let i = start; i > start - 10; i--) {
                this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
              }
    
              this.top = this.top - 10;
    
              /* 下面3种方式都可以调用 finishPullToRefresh 方法 */
    
              // this.$broadcast('$finishPullToRefresh')
              $scroller.get('myScroller').finishPullToRefresh()
              // this.$refs.my_scroller.finishPullToRefresh()
    
            }, 1500)
          },
    
          loadMore() {
            setTimeout(() => {
    
              let start = this.bottom + 1
    
              for (let i = start; i < start + 10; i++) {
                this.items.push(i + ' - keep walking, be 2 with you.')
              }
    
              this.bottom = this.bottom + 10;
    
              setTimeout(() => {
                $scroller.get('myScroller').resize()
              })
            }, 1500)
          },
    
          onItemClick(index, item) {
            console.log(index)
          }
        }
    
      }
    </script>
    
    <style>
      html, body {
        margin: 0;
      }
    
      * {
        box-sizing: border-box;
      }
    
      .row {
         100%;
        height: 50px;
        padding: 10px 0;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        color: #444;
        background-color: #fff;
      }
    
      .grey-bg {
        background-color: #eee;
      }
    </style>

    Step 4: add viewport meta in index.html

    <meta name="viewport" content="width=device-width, user-scalable=no">

    Step 5: run the project

    $ npm run dev
  • 相关阅读:
    POJ 3710 Christmas Game#经典图SG博弈
    POJ 2599 A funny game#树形SG(DFS实现)
    POJ 2425 A Chess Game#树形SG
    LeetCode Array Easy 122. Best Time to Buy and Sell Stock II
    LeetCode Array Easy121. Best Time to Buy and Sell Stock
    LeetCode Array Easy 119. Pascal's Triangle II
    LeetCode Array Easy 118. Pascal's Triangle
    LeetCode Array Easy 88. Merge Sorted Array
    ASP.NET MVC 学习笔记之 MVC + EF中的EO DTO ViewModel
    ASP.NET MVC 学习笔记之面向切面编程与过滤器
  • 原文地址:https://www.cnblogs.com/liangxuru/p/6434267.html
Copyright © 2011-2022 走看看