vue-mobile-loadmore

移动端，h5/webapp, 简易的上拉加载，下拉刷新。

Install

npm install vue-mobile-loadmore --save

CommonJS

You can use any build tool which supports commonjs:

// register globally
var vueLoadMore =  require('vue-mobile-loadmore');
Vue.use(vueLoadMore)

// or for a single instance
var vueLoadMore = require('vue-mobile-loadmore');
new Vue({
  directives: {vueLoadMore}
})

Or in ES2015/ES6:

// 在单页面没引用
import vueLoadMore from 'vue-mobile-loadmore'
new Vue({
  components: {
     vueLoadMore
  }
})

// 全局注册
import vueLoadMore from 'vue-mobile-loadmore'
Vue.use(vueLoadMore)

Usage

  .important
        vue-load-more(
            :index = 'index',
            ref = 'loadMore',
            :option = 'option',
            v-on:startLoading = 'startLoad',
            v-on:startRefresh = 'startRefresh')
            .body
                p(v-for='x in 100') 123123
  ...
  用的pug,请自行转化html

  全局修改css, 来调整样式，注意权重

  span.refresh-mes
  img.refresh-img

  span.loading-mes
  img.loading-img
  ...

new Vue({
  el: '#app',
  data() {
        return {
            option: {
                refresh_message: '快松手',
                loading_message: '别拉了',
                refresh_img: require('../assets/images/load-more/loading.gif'),
                loading_img: require('../assets/images/load-more/loading.gif')
            }
        }
  },
  methods: {
    startLoad() {
        console.log('开始加载')
        // 上拉加载调用的方法
        setTimeout(() => {
            this.loadFinish()
        }, 500)
    },
    startRefresh() {
        console.log('开始刷新')
        // 下拉刷新调用的方法
        setTimeout(() => {
            this.loadFinish()
        }, 500)
    },
    loadFinish() {
        // 获得数据加载完成后 手动调用此方法来结束动画
        this.$refs.loadMore.loadingFinish()
    }
});

Options

| Option | Description | | ----- | ----- | | refresh_message | 下拉刷新的提示字段 | | loading_message | 上拉加载的提示字段 | | refresh_img | 下拉刷新的loading.gif | | loading_img | 上拉加载的loading.gif |

Development

|Command|Description| |---|---| |npm run build|Build in umd format|

License

MIT