jroll-vue-infinite v0.1.1

JRoll无限加载+下拉刷新 for Vue2

选项

JRoll.VueInfinite(options , jrollOptions)

• options 是传给无限加载组件的参数，包含8个选项

• jrollOptions 是创建JRoll实例时传给JRoll的参数，详细请查看JRoll教程的可选参数

无限加载

jroll-vue-infinite.js必须在vue和jroll之后引入

<script src="vue.js"></script>
<script src="jroll.js"></script>
<script src="jroll-vue-infinite.js"></script>

<div id="app">
    <jroll-infinite>
        <div v-for="i in items">{{i}}</div>
    </jroll-infinite>
</div>

<script>
var vm = new Vue({
  el: '#app',
  components: {
    'jroll-infinite': JRoll.VueInfinite({
      tip: '正在加载...',
      bottomed: function () {
        var me = this
        ajax({
          url: 'getData.do?page=' + (me.page + 1), // 默认初始页为0，因此需要自己加1
          success: function (data) {
            vm.$data.items = vm.$data.items.concat(data)
            
            // 成功后执行该方法
            me.success()
          },
          error: function () {
            // 失败后执行该方法，会变更tip，显示错误提示
            me.error()
          }
        })
      },
      updated: function () {...}
    }, {
      scrollBarY: true
    })
  },
  data: {
    items: []
  }
})
</script>

开启下拉刷新功能

需要先引入jroll-pulldown.js，然后添加pulldown: {}选项，bottomed选项需要对complete进行判断处理

var options = {
  pulldown: {},
  bottomed: function (complete) {
    var me = this
    ajax({
      url: 'getData.do?page=' + (me.page + 1),
      success: function (data) {
        // 加入下拉刷新功能后需要判断complete是否为function类型，是，表示刷新，复位第1页；否，表示上拉加载下一页，拼接下一页数据
        if (typeof complete === 'function') {
          vm.$data.items = data
          complete()
        } else {
          vm.$data.items = vm.$data.items.concat(data)
        }

        me.success()
      },
      error: function () {
        me.error()
      }
    })
  }
}

var vm = new Vue({
  el: '#app',
  components: {
    'jroll-infinite': JRoll.VueInfinite(options)
  },
  data: {
    items: []
  }
})

更新日志

v0.1.1 (2017-11-07)

• 修复加载完全部后，下拉刷新出现“已加载完全部”的错误提示

v0.1.0 (2017-07-20)

• 添加total，completeTip，errorTip选项，减少用户操作
• 添加success，error方法，在数据加载成功或失败后调用

v0.0.2 (2017-02-05)

• 添加下拉刷新功能

v0.0.1 (2016-12-25)

• 完成发布