vue,better-scroll pulldown只能触发一次,怎么解决?~

Question

<template>
    <div ref='wrapper'>
        <div class="bScroll-container">
            <div class="bScroll-top" v-show="show" :style="msgCol">
                <span>{{showMsg}}</span>
            </div>
            <div class="bScroll-content">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    data () {
        return {
            showMsg: '下拉刷新...',
            show: false,
        }
    },
    props: {
        probeType: {
            type: Number,
            default: 1
        },
        click: {
            type: Boolean,
            default: true
        },
        listenScroll: {
            type: Boolean,
            default: true
        },
        data: {
            type: Array | Object,
            default: null
        },
        pullup: {
            type: Boolean,
            default: true
        },
        pulldown: {
            type: Boolean,
            default: true
        },
        beforeScroll: {
            type: Boolean,
            default: false
        },
        refreshDelay: {
            type: Number,
            default: 20
        },
        pullUpLoad: {
            type: Boolean,
            default: true
        },
        msg: {
            type: String,
            default: ''
        },
        pullDownRefresh: {
            type: Boolean | Object,
            default: true
        }
    },
    mounted () {
        setTimeout(() => {
            this._initScroll()
        }, 20)
    },
    computed: {
        msgCol () {
            switch (this.msg) {
            case 'black':
                return `color: #2f2725`
            default:
                return `color: #fff`
            }
        }
    },
    methods: {
        _initScroll () {
            if (!this.$refs.wrapper) {
                return
            }
            this.scroll = new BScroll(this.$refs.wrapper, {
                probeType: this.probeType,
                click: this.click,
                pullDownRefresh: {
                    threshold: 50,
                    stop: 20
                },
                pullUpLoad: {
                    threshold: -50
                }
            })
            if (this.listenScroll) {
                let me = this
                this.scroll.on('scroll', pos => {
                    if (pos.y > 50) {
                        this.show = true
                        this.showMsg = '加载中...'
                    }
                })
            }
            if (this.pullup) { // 上拉加载
                this.scroll.on('pullingUp', () => {
                    console.log(111)
                    this.$emit('nextPage')
                    this.scroll.finishPullUp()
                    this.scroll.refresh()
                })
            }
            if (this.pulldown) { // 下拉刷新
                this.scroll.on('pullingDown', (pos) => {
                    this.$emit('pulldown')
                })
            }
            if (this.beforeScroll) {
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }
        },
        disable () {
            this.scroll && this.scroll.disable()
        },
        enable () {
            this.scroll && this.scroll.enable()
        },
        refresh () {
            this.scroll && this.scroll.refresh()
        },
        scrollTo () {
            this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
        },
        scrollToElement () {
            this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
        }
    },
    watch: {
        data () {
            setTimeout(() => {
                this.refresh()
            }, this.refreshDelay)
        }
    }
}
</script>
<style lang="less" scoped>
.bScroll-top{
    text-align: center;
    color: #ffffff;
    line-height: 3rem;
}
</style>

• 已经在pulldown后面加了this.scroll.finishPullUp(), this.scroll.refresh(),但是还是不能解决上拉加载就能加载一次的问题...
• 请问各位,我这是哪里写错了吗~?或者写漏了

Answer 1

• 我在上拉加载完成后,将那两个调用方法用setTimeOut包裹起来了,这样就可以了..

if (this.pullup) { // 上拉加载
    this.scroll.on('pullingUp', () => {
        this.$emit('nextPage')
        setTimeout(() => {
            this.scroll.finishPullUp()
            this.scroll.refresh()
        }, 500)
    })
}

Answer 2

组件应该没啥问题，使用的时候得增加一些判断，防止重复请求。

<my-better-scroll @nextPage="getNextPage"></my-better-scroll>

data () {
    return {
        isLoaded: false // 以此来判断数据是否加载完了
    }
},
methods: {
    getNextPage () {
        //只有isLoaded为false的时候才去加载数据，这样不就不会重复去请求接口了
        if (!this.isLoaded) {
            this.isLoaded = true
            //数据请求
            axios.get('/api/xxx')
                .then(res => {
                    //请求成功了再将isLoaded变成false状态
                    this.isLoaded = false
                })
                .error(err => {
                    //error同理
                    this.isLoaded = false
                })
        }
    }
}