core.js?e148:1319 Uncaught TypeError: Cannot read property 'Animate' of undefined
at Scroller.__publish (eval at (app.js:838), :864:37)
at Scroller.scrollTo (eval at (app.js:838), :494:10)
at Scroller.doTouchEnd (eval at (app.js:838), :791:11)
at VueComponent.touchEnd (eval at (app.js:862), :200:21)
at VueComponent.eval [as touchEnd] (eval at (app.js:657), :216:54)
at VueComponent.eval (eval at makeGetterFn (eval at (app.js:657)), :3:15)
at HTMLDivElement.handler (eval at (app.js:657), :8606:10)

按照你的step来run ，报错~
Uncaught SyntaxError: Unexpected token import at Object.<anonymous> (http://localhost:8080/app.js:1260:2) at __webpack_require__ (http://localhost:8080/app.js:556:30) at fn (http://localhost:8080/app.js:87:20) at eval (eval at <anonymous> (http://localhost:8080/app.js:876:2), <anonymous>:7:20) at Object.<anonymous> (http://localhost:8080/app.js:876:2) at __webpack_require__ (http://localhost:8080/app.js:556:30) at fn (http://localhost:8080/app.js:87:20) at eval (eval at <anonymous> (http://localhost:8080/app.js:1080:2), <anonymous>:7:19) at Object.<anonymous> (http://localhost:8080/app.js:1080:2) at __webpack_require__ (http://localhost:8080/app.js:556:30)

async mounted() {
    var Res = await this.GetData();
    for(let i = 0; i < Res.list.length; i++){
        this.Orders.push(Res.list[i]);
    }
    var vm = this;
    setTimeout(function() {
        vm.$refs.my_scroller.resize();
        vm.loaded = true;
    });
},
methods: {
    async refresh() {
        var vm = this;
        setTimeout(async () => {
            vm.Orders = [];
            var Res = await vm.GetData();
            for(let i =0;i<Res.list.length;i++){
                vm.Orders.push(Res.list[i]);
            }
            if (vm.$refs.my_scroller)
                vm.$refs.my_scroller.finishPullToRefresh();
        }, 1500)
    },
    infinite() {
        var vm = this;
        console.info(vm.loaded);
        if(vm.loaded){
            setTimeout(async function() {
                var Res = await vm.GetData();
                for(let i =0;i<Res.list.length;i++){
                    vm.Orders.push(Res.list[i]);
                }
                setTimeout(() => {
                    if (vm.$refs.my_scroller)
                    vm.$refs.my_scroller.resize();
                })
            }, 1500);
        }
    },
    async GetData(){
        try {
            var map = new Map();
            map.set('waiting_delivery','等待交付');
            map.set('success','交易完成');
            let Res = await Ajax.Get('user/order-list');   
            if(Res.list.length > 0 ){
                this.isData = true;
            }
            for(let i = 0; i < Res.list.length;i++){
                Res.list[i].status = map.get(Res.list[i].status);
                // this.Orders.push(Res.list[i]);
            }
            return Res;
        } catch (error) {
            console.info(error);
        }
    },
    RightPanel(mode) {
        this.ShowRightPanel = mode;
    },
    SearchInputFocus() {
        this.SearchBtn = !this.SearchBtn;
    },
    Search() {
        this.SearchInputFocus();
        this.GetData();
    }
}

<scroller 
    style="top:6rem;" 
    ref="my_scroller"
    :on-refresh="refresh"
    :on-infinite="infinite">
    <div class="cell" v-for="item in Orders">
        <div class="cell-description">
            <div class="flex-box-row order-cell-title">
                <p class="title">{{item.sn}}</p>
                <p class="money">￥{{item.money}}</p>
            </div>
            <span class="info">
                设备：{{item.pay_device}}/{{item.alias}} <br>
                支付类型：{{item.pay_type}} <br>
                下单时间：{{item.trxdate}} <br>
                支付时间：{{item.pay_time}} <br>
                订单状态：{{item.status}}
            </span>
        </div>
    </div>
</scroller>

只有在刚进入页面的时候会触发一次（但是又和mounted重复了），之后便不会再触发

vue-scroller引入项目中，解析不了vue-scroller/index.js, 没办法babel index.js
报错！

此问题和keep-alive有关。
可以这样重现：

App.vue 添加keep-alive
<keep-alive> <router-view></router-view> </keep-alive>

RefreshAndInfinite.vue 的
infinite()中 添加日志打印 console.log('infinite')

访问http://localhost:8080/#/refreshAndInfinite
滚动页面，至少激活infinite()一次，然后点击返回。此时控制台开始不停打印log

在移动端使用会选不到最下方的几行,scroller上加了top,然后在话动到最下方的时候会会弹，导致选不到最下面的几行的

"vue": "^2.1.8",
"webpack": "^2.1.0-beta.25",

我测试下来
import Scroller from './components/Scroller.vue'
export default Scroller(这里要加;分号)
window.Scroller = Scroller
@wangdahoo
作者你更新下吧！

如果列表已经到达最底部，手指按住屏幕一直往上滑动直到移动到屏幕外面也不松开那么列表就不会自动回到原来的位置了

手机端写图文加载更多 拉不到底部就反弹回来了 纯文本就可以一直加载正常 是什么原因呢

做的很棒 希望可以更加完善，主要是加载样式自定义程度希望可以更高

A组件模板 FeedList 为组件B

<template>
 <FeedList/>
</template>
import FeedList from 'xxx';
const FeedList = {
  components: {
    FeedList
 }
}

B组件模板 Feed 为组件C

<template>
    <scroller 
      style="top: 55px"
      delegate-id="myScroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      ref="my_scroller"
      :animating="true"
    >
      <div class="feed-list">
        <Feed v-for="feed in feeds" :feed="feed" :key="feed.id"></Feed>
      </div>
    </scroller>
</template>

js

import Scroller from 'vue-scroller';
import Feed from 'xxx';
components: {
      Scroller,
      Feed
    },

场景是这样的
现有3个组件 暂且分别叫做 A,B,C
B组件为包含scroller的组件，B为A的子附件， B拥有子组件 Feed，作为内容循环的载体
父组件中 feed-list中内容为循环服务端请求到的数据
animating如果设置为true,
模板更新后 会提示

Uncaught TypeError: Cannot read property 'Animate' of undefined
    at Scroller.__publish (core.js:1319)
    at Scroller.doTouchEnd (core.js:1210)
    at VueComponent.touchEnd (Scroller.vue:382)
    at VueComponent.boundFn [as touchEnd] (vue.esm.js:124)
    at touchend (Scroller.vue?cd1f:15)
    at HTMLDivElement.invoker (vue.esm.js:1658)

是core.effect这个对象不存在

如果设置animating为FALSE
不错出现上述错误，但是页面在scroll的时候，一点都不流畅，滑动多远就滚多远

将demo的代码做为子组件的时候，在挂载的时候 设置resize则会报错
Uncaught TypeError: Cannot read property 'resize' of undefined

还请指点迷津
谢谢

我跑的是example/index.html这个文件，挂的是vue-scroller.min.js。并且我把所有setTimeout箭头语法改成了常规语法。发现在手机上还是不行。似乎是这个组件有语法无法识别。

难道您这个插件是必须架上vue-cli，用babel打包成es5后才能跑？

@wangdahoo
Hi, thanks for creating this great component!
Is it possible to include a license to clarify the status of this project?

• vue 版本是 2.1.6
• 按照 demo 的方式使用报错如下

[Vue warn]: Unknown custom element: <scroller> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in anonymous component at 

<div ref="imgWrapper"> <div class="img-container" @click="show"> <img class="img" src="http://pic.to8to.com/live/day_170121/20170121_a7ebc40508d40fdbfb98br7EgakxkSFN.jpg"> <img class="img" src="http://pic.to8to.com/live/day_170121/20170121_8a8719ef2f807f6332c9I8gI3v9AZe6l.jpg"> <img class="img" src="http://pic.to8to.com/live/day_170121/20170121_9f90855c39a463fc4655BpZgF0phNaxd.jpg"> <img class="img" src="http://pic.to8to.com/live/day_161215/20161215_0aa7e64b0ec919c5f80dvS4ffTLwj9YD.jpg"> </div> </div>

can't click

设置animationDuration属性没有任何的效果，不知道是我理解错了含义还是bug

请教下大神 我用了这个组件
列表上拉加载了更多之后 点击列表进入子页面，或者切换view, 然后返回
vue-scroller的页面translate3d(0px, 0px, 0px)的Y值还原变成0了 这怎么解决饿

PC上不是很好测试，尤其内容是连接的时候，拖动会不小心点击

希望支持top和bottom的加载样式可以使用具名slot来自定义

我做的一个目录组件，从父组件得到目录数据，然后渲染出一个目录列表，这渲染出的目录只能在一屏的高度内弹动，无法滚动到最低部，我在beforeUpdate中设置好scroll父元素的高度还是不行，请问我的使用方法错了吗

<template>
    <div class="catalog-mask" @click.stop="closeCatalog">
        <div class="catalog-container" :style="{height: catalogHeight + 'rem'}">
            <Scroller ref="scroller">
                <div>
                    <div class="catalog-container__count">共{{this.catalogData.length}}章</div>
                    <div v-for="(item, index) of this.catalogList" 
                        :key="item.articleId"
                        class="catalog-container__item"
                        :class="item.current ? 'current' : ''"
                        @click.stop="selectCatalog(item.articleId)">
                        {{item.title}}
                    </div>
                </div>
            </Scroller>
        </div>
    </div>
</template>

<script>
import Scroller from 'vue-scroller';
export default {
    data () {
        return {
            catalogHeight: 0,
        }
    },
    props: ['catalogData', 'articleId'],
    components: {
        Scroller,
    },
    mounted(){
    },
    beforeUpdate(){
        this.catalogHeight = this.catalogData.length;
    },
    updated(){
        setTimeout(() => {
            this.$refs.scroller.resize();
            console.log('resize');
        }, 2000)
    },
    computed:{
        catalogList(){
            let temp = this.catalogData.map((item, index) => {
                if(item.articleId === this.articleId){
                    item.current = true;
                }
                return item;
            })
            return temp;
        }
    },
    methods: {
        selectCatalog(articleId){
            this.$emit('selectCatalog', articleId);
        },
        closeCatalog(){
            this.$emit('closeCatalog');
        },
        getPrev(){

        },
        getNext(){

        },
    },
}
</script>

<style lang="scss">
    .catalog-mask{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0, .3);
        z-index: 11;
    }
    .catalog-container{
        min-height: 100%;
        background: #FFF;
        margin-right: .9rem;
        position: relative;
    }
    .catalog-container__count{
        margin-left: .5rem;
        margin-right: .9rem;
        height: .82rem;
        line-height: 1.2rem;
        font-size: .26rem;
        color: #B3B3B3;
    }
    .catalog-container__item{
        margin-left: .5rem;
        margin-right: .9rem;
        height: 1rem;
        font-size: .3rem;
        color: #545454;
        line-height: 1rem;
        border-bottom: 1px solid #ECECEC;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .catalog-container__item:active{
        color: #ccc;
    }
</style>

export 'Scroller' was not found in 'vue-scroller'

图文加载的时候 没办法拉到底.
已经渲染完毕了，resize()后还是不行

<v-scroller> // vertical <v-scroller></v-scroller> // Horizontal </v-scroller>

vue1.0 中使用 vue-scroller，引入组件之后报错如上，如何解决

版本 0.4.0
使用以下代码，调用的时候，必须要等待滑动事件结束之后，才可以调用，会出现延迟的情况，感觉上就像要点击2次，才能scrollTo指定的位置。
调用getPosition() 打印出来是之前的位置，比如从顶部滚动到底部的时候，getPosition() 获取的值是 0 ,0 。

back2Top(){
            this.$refs.my_scroller.getPosition()
            this.$refs.my_scroller.scrollTo(null, 0, true)
        },

您好，我测试了四个手机，滑动感觉卡顿，三个ios，两个安卓。 自己写的和你的demo都有测，在安卓上卡顿卡顿更明显，感觉就像丢帧一样。
然后又测了一下vonic中的scroll组件，这个不卡。

在轮播图上滑动时如何防止vue-scroller滑动，该怎么写代码

进入页面会触发一次infinite，
如果不finishInfinite那么拉到页面底部就不会执行infinite，
如果finishInfinite的话，下拉到页面底部会不断执行infinite，
麻烦看下这个问题哈 @wangdahoo

Condition

[email protected]
[email protected]
[email protected]
[email protected]

My step:

1. npm install vue-scroller
2. import Scroller from 'vue-scroller' ( in my vue component )
3. declare components object components: {Scroller} ( in my vue component )
4. write html <scroller><div v-for="..."></div></scroller>
5. preview

Then

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/jonas/Documents/VoyageOne/offshore2/offshore-mobile/client-webchat/src/main/webapp/node_modules/vue-scroller"

And

I see your babelrc in your demo

Maybe you need a "per-dependency" in your package.json

按帮助创建webpack-simple项目的话修改webpack.conf.js启动项目没有问题，但是使用webpack创建项目的话，在build/webpack.base.conf 中添加 vue-scroller的loaders，但是在进入node_modules时babel没有转换src/index.js导致了该错误

没做任何修改，重新编译后，编译后的文件大小不一样，使用的时候提示Uncaught TypeError: Cannot read property 'style' of null

使用webpack 2.0 会报错 Failed to mount component: template or render function not defined.
(found in component )

我npm下载你的组件到我的项目里，我引用后会报一个错误
[Vue warn]: Failed to mount component: template or render function not defined. (found in component <scroller>) 这是代码：

<template>
      <div>
              <header-module></header-module>
              <div class="scrollN container bgImage" style="top:42px; height:auto;">
                      <scroller style="top:42px; height:auto;"
                      :on-refresh="refresh"
                      :on-infinite="infinite"
                      ref="my_scroller">
                      </scroller>
               </div>
        </div>
</template>

<script>
    import HeaderComponent from '../components/header-module.vue'
    import Scroller from 'vue-scroll'
    import FooterComponent from '../components/footer-module.vue'
    import oHttp from '../js/http.js'

    export default{

        components:{
            "header-module":HeaderComponent,
            "footer-module":FooterComponent,
            Scroller
        },
        ... ...

非常感谢

使用npm集成的时候，引用会出现了问题，因为package.json里面的"main"值是"src/index.js"，而index.js是使用es6开发的。

import Scroller from './components/Scroller.vue'
export default Scroller

我的wabpack不会去解析es6的代码，所以会报错

用vue-resource加载数据 程序先加载完mounted里面的数据还没开始滚动屏幕马上又加载了infinite的数据 并没有像demo一样正常加载滚动以后再加载

mounted() {
this.$http.get('/static/data/banner.json').then((response) => {
for(let i = 0 ; i < 10 ; i++ ){
this.items.push(response.body.card[i])
}
},function(){
console.log('error')
})
this.top = 1
this.bottom = 10
setTimeout(() => {
this.$refs.my_scroller.resize()
console.log('one')
})
},
methods: {
infinite() {
if (this.bottom >= 28) {
setTimeout(() => {
this.$refs.my_scroller.finishInfinite(true)
}, 1500)
return;
}
setTimeout(() => {
let start = this.bottom
let all = start + 10
if(all>=28){
all = 28
}
this.$http.get('/static/data/banner.json').then((response) => {
for(let i = start ; i < all ; i++ ){
this.items.push(response.body.card[i])
}
},function(){
console.log('error')
})
this.bottom = this.bottom +10;
setTimeout(() => {
this.$refs.my_scroller.finishInfinite()
})
}, 1500)
},

}

打开列表页面 infinite 会被调用2次，是什么原因呢？

我发现一个问题。
在页面刚加载进来的时候infinite会触发一次
之后滑倒底部就不会再触发了。

版本 0.4.0
现在实现了一个体验不好的版本，即增加一个scrollingComplete的回掉方法，但是延迟很高，尤其是在“减速滑动”的时候，有没有更好的解决方案？

发现官网的例子程序,如果上拉加载更多的时候,第一页加载没有问题,第二页loading框就不会消失了