Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
1.html
2.html
README.md
jroll-vue-infinite2.js
package.json

README.md

JRoll无限加载+下拉刷新 for Vue2 (第二版)

示例

<jroll-infinite class="jroll-vue-infinite"
  total="10"
  :jroll-options="options"
  @on-scroll-bottom="scrollBottom"
  @on-scroll-start="scrollStart"
  @on-scroll="scroll"
  @on-scroll-end="scrollEnd">
    <div class='item' v-for="i in items">{{i.index}}、{{i.text}}</div>
</jroll-infinite>
Vue.component('jroll-infinite', JRoll.VueInfinite2())

注意:加载顺序必须先引入jroll.js再引入jroll-vue-infinite2.js

NPM安装

npm i -D jroll
npm i -D jroll-vue-infinite2

选项

选项 默认值 必填 说明
total 99 总页数
:jroll-options -- 提供jroll的选项,参考http://www.chjtx.com/JRoll/#options
@on-scroll-bottom -- 滑动到底部时执行,初始化时会执行一次,用于更新数据,function (page, success, error)
@on-scroll-start -- jroll的scrollStart事件,function (jroll)
@on-scroll -- jroll的scroll事件,function (jroll)
@on-scroll-end -- jroll的scrollEnd事件,function (jroll)

无限加载

<div id="app">
  <jroll-infinite class="jroll-vue-infinite" total="10" ref="myJRoll"
    :jroll-options="options"
    @on-scroll-bottom="scrollBottom"
    @on-scroll-start="scrollStart">
    <div class='item' v-for="i in items">{{i.index}}、{{i.text}}</div>
  </jroll-infinite>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    page: 0,
    items: [],
    options: {
      scrollBarY: true
    }
  },
  mounted: function () {
    // 可以通过ref属性获取jroll对象
    console.log(this.$refs.myJRoll.jroll)
  },
  methods: {
    scrollBottom: function (page, success, error) {
      var me = this
      ajax({
        url: 'getData.do?page=' + (page + 1),
        success: function (data) {
          me.items = me.items.concat(data)
          success()
        },
        error: function () {
          error()
        }
      })
    },
    scrollStart: function (jroll) {
      // console.log(jroll)
    }
  }
})
</script>

开启下拉刷新功能

需要先引入jroll-pulldown.js,然后添加:pulldown-options选项和@on-pulldown事件

补充选项

选项 默认值 必填 说明
:pulldown-options -- 添加该选项才能开启下拉刷新,可为空对象,参考https://github.com/chjtx/JRoll/tree/master/extends/jroll-pulldown,除refresh选项外,其余选项都有效
@on-scroll-end -- jroll的scrollEnd事件,function (jroll)
<div id="app">
  <jroll-infinite class="jroll-vue-infinite" total="10" :pulldown-options="{}"
    @on-scroll-bottom="scrollBottom"
    @on-pulldown="pulldown">
    <div class='item' v-for="i in items">{{i.index}}、{{i.text}}</div>
  </jroll-infinite>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    page: 0,
    items: []
  },
  methods: {
    pulldown: function (success, error) {
      var me = this
      ajax({
        url: 'getData.do?page=1',
        success: function (data) {
          me.items = data
          success()
        },
        error: function () {
          error()
        }
      })
    },
    scrollBottom: function (page, success, error) {
      var me = this
      ajax({
        url: 'getData.do?page=' + (page + 1),
        success: function (data) {
          me.items = me.items.concat(data)
          success()
        },
        error: function () {
          error()
        }
      })
    },
    scrollStart: function (jroll) {
      // console.log(jroll)
    }
  }
})
</script>

更新日志

v2.0.2 (2018-07-13)

  • 解决 vue-cli 3.0 使用 vue.runtime.esm.js 解释不了template的问题

v2.0.1 (2018-01-06)

  • 修复jrollOptions选项失效的问题
  • updated方法里使用$nextTick解决滑动触发更新的问题

v2.0.0 (2017-11-29)

  • 发布jroll-vue-infinite2