vue中better-scroll,用touchEnd后页面不能滚动了

Question

vue中用better-scroll

<scroll class="scroll" @nextPage="nextPage">
    <ul class='list'>
        <li class="list-item" v-for='(n,index) in reChargeList' :key='index'>...</li>
        <div class="more-btn" @click="nextPage">--- {{checkMore}} ---</div>
    </ul>
</scroll>

现在问题是,当上拉加载后,加载成功了,但是页面却怎么也拉不下去,这是为什么??

<template>
    <div ref='wrapper'>
        <slot></slot>
    </div>
</template>
<script>
    import BScroll from 'better-scroll'
    export default {
        props: {
            probeType: {
                type: Number,
                default: 3
            },
            click: {
                type: Boolean,
                default: true
            },
            listenScroll: {
                type: Boolean,
                default: false
            },
            data: {
                type: Array | Object,
                default: null
            },
            pullup: {
                type: Boolean,
                default: true
            },
            pullUpLoad: {
                type: Boolean,
                default: true
            },
            beforeScroll: {
                type: Boolean,
                default: false
            },
            refreshDelay: {
                type: Number,
                default: 20
            }
        },
        mounted () {
            setTimeout(() => {
                this._initScroll()
            }, 20)
        },
        methods: {
            _initScroll () {
                if (!this.$refs.wrapper) {
                    return
                }
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    click: this.click
                })
                if (this.listenScroll) {
                    let me = this
                    this.scroll.on('scroll', pos => {
                        me.$emit('scroll', pos)
                    })
                }

                if (this.pullup) { // 划重点,加载成功了,但是页面滚动不下去了
                    this.scroll.on('touchEnd', (pos) => {
                        console.log(pos.y)
                        if (pos.y < 50) {
                            this.$emit('nextPage')
                        }
                    })
                    // this.scroll.on('scrollEnd', () => {  // 上拉加载也可以,但是下拉也加载了
                    //     console.log(this.scroll.y, this.scroll.maxScrollY + 50)
                    //     if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                    //         this.$emit('nextPage')
                    //     }
                    // })
                }

                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>

Answer 1

需要更新视图

this.scroll.on('touchEnd', (pos) => {
    console.log(pos.y)
    if (pos.y < 50) {
        this.$emit('nextPage')
    }
    this.refresh() // ADD THIS
})