suguangwen / vue-scroll

vue scroll which can work.

vue-scroll

vue scroll which can work.

借鉴于ElemeFE/vue-infinite-scroll． 重新设计了核心算法． 将持续更新和添加与滚动有关的效果

＠TODO 增加环境与测试用例．

安装//Install

npm install vue_scroll --save

###ES6

import vue_scroll from 'vue_scroll'
Vue.use(vue_scroll)

###CommonJS

var vue_scroll =  require('vue_scroll');
Vue.use(vue_scroll)

###直接引用//Direct include

<script src="../node_modules/vue_scroll/vue_scroll.js"></script>

使用方法//Usage

Use v-scroll to enable the infinite scroll, and use scroll-* attributes to define its options.

使用v-scroll进行滚动翻页,使用 scroll- * 属性来定义它的选项。

<div v-scroll="down()" scroll-foot="500" scroll-top="200" scroll-up="up()">

</div>

  new Vue({
    el: 'body',
    data: function () {
      return {a: [], b: []}
    },
    methods: {
      down: function () {
         //当滚动条距离底部高度小于或等于你在scroll-foot设置的高度时将运行一次此函数
         //if scrollFoot height <= scroll-foot , function run.
        for (var i = this.a.length; i < this.b.length; i++) {
          this.a.push(this.b[i])
          if (i % 6 === 5) {
            break
          }
        }
      },
      up: function () {
        //当滚动条距离顶部高度小于或等于你在scroll-top设置的高度时将运行一次此函数
        //if scrollTop height <= scroll-top , function run.
      }
    },
    ready: function () {
      //滚动翻页实例（请按照自己的需要去修改）
      //scroll the instance.
      $.ajax({
          url: '#',
          type: 'get',
          success: function (res) {
            if (res.status === 200) {
              // 初始化数据 先获取所有数据并初始化前６条
              //Initialize the data,get 0-6 data of the array.
              this.$set('b', res.data)
              for (var i = 0; i < 6; i++) {
                this.a.push(this.b[i])
              }
            }
          }
        })
    }
  })

选项//Options

scroll/Option	Description
scroll-foot	数字(默认为０)：设定滚动条距离底部的高度．// Number(default = 0)：Set the height of the scroll bar at the bottom of the distance.
scroll-top	数字(默认为０)：设定滚动条距离顶部的距离．// Number(default = 0)：Set the height of the scroll bar at the top of the distance.
scroll-up	设定滚动条往上回滚时触发的函数．// When setting a scroll bar to rollback trigger function.
scroll-initialize	布尔(默认为false)：设定为true时将在页面加载完成后触发一次v-scroll设定的函数．// Boolean(default = false)：After completion of the page load when set to true will trigger a v-scroll set function.

License

MIT

vue-scroll's Issues

怎么在NPM 上使用

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

换成你这个怎么使用呢？

微信上拉不能出现负数

微信上拉出现负数 scroll-top="-50" 失效

调用的问题

<div v-scroll="loadMore()" scroll-foot="49" scroll-top="49" scroll-up="refresh()">
      <div class="recommend-content-list">
        <div class="rec-refresh">
          <img src="../../static/imgs/spinner.png"/>
        </div>
        <div class="rec-header">
        </div>
        <div class="rec-item" v-for="item in items" track-by="$index">
          {{ item }}
          <br>
        </div>
      </div>
      <div class="rec-loadmore">
          <img src="../../static/imgs/spinner.png"/>
      </div>
      <div class="fix-tab"></div>
    </div>

.recommend-content-list {
    width: 100%;
  }
  .fix-tab {
    width: 100%;
    height: 49px;
  }
  .rec-loadmore {
    height: 49px;
    width: 100%;
    text-align: center;
  }
  .rec-refresh {
    height: 49px;
    width: 100%;
    text-align: center;
  }
  .rec-loadmore img, .rec-refresh img {
    width: 20px;
    height: 20px;
    margin-top: 15px;
    -webkit-animation: gogogo .5s infinite linear;
  }

var height = $(window).height()
var self = this
var navigation = $('drnavigation-bar')
var tabBar = $('drtabbar')
if ( navigation ) {
    height -= 64;
}
if ( tabBar ) {
    height -= 49;
} 
$('.recommend-content-list').height(height);

触发多次refresh。
在触发下拉刷新后, 刷新的控件一直存在, 导致在这种状态下继续下拉还会不停的调用refresh方法。
小白, 请指教。

为何直接报错

[Vue warn]: Error in directive scroll bind hook: "TypeError: Cannot read property 'el' of undefined"

found in

---> at src/components/BookSelf/BookSelf.vue
at src/App.vue

2.0

2.0好像不支持了。。。

下拉过快的情况下可能会多次触发

前一次下拉加载的数据还没加载完 在滑动速度过快的情况下 会再短时间内多次触发加载 然后....页面数据就重复了.

额...请问有人碰到过这种情况吗

在App.vue里面使用找不到this

为什么我在main.js里面导入并且use，在App.vue里面引用就报错呢，找不到this，我改怎么用这个插件啊