ustbhuangyi / better-scroll

:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance
https://better-scroll.github.io/docs/en-US/
MIT License
16.47k stars 2.61k forks source link

使用下拉刷新和下拉加载的时候 头部和底部没有出现默认的文本提示 #1066

Closed ghost closed 4 years ago

ghost commented 4 years ago

"@better-scroll/core": "^2.0.2", "@better-scroll/pull-down": "^2.0.2", "@better-scroll/pull-up": "^2.0.2",

我在使用下拉刷新和下拉加载的时候 头部和底部没有出现默认的文本提示

import BScroll from '@better-scroll/core' import PullUp from '@better-scroll/pull-up' import PullDown from '@better-scroll/pull-down' import './index.css'

BScroll.use(PullUp) BScroll.use(PullDown)

export default { name: 'BetterScroll', data() { return { scroll: null } }, methods: { async init() { await this.$nextTick()

        this.scroll = new BScroll(this.$el, {
            pullDownRefresh: true,
            pullUpLoad: true,
            click: true,
            ...this.$attrs
        })

        this.scroll.on('touchEnd', (pos) => {
            // 下拉动作
            if (pos.y > 50) {
                this.onEmit('PullDown')
            }
        })
        this.scroll.on('scrollEnd', () => {
            // 滚动到底部
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                this.onEmit('PullUp')
            }
        })
        // this.scroll.on('pullingDown', () => { this.onEmit('PullDown') })
        // this.scroll.on('pullingUp', () => { this.onEmit('PullUp') })
    },
    async onEmit(func) {
        const refresh = func === 'PullDown',
            emitFunc = refresh ? 'refresh' : 'loadMore'

        await this.$emit(emitFunc)

        await this.$nextTick()
        this.scroll.refresh()

        if (refresh) {
            this.scroll.finishPullDown()
        } else {
            this.scroll.finishPullUp()
        }
    }
},
mounted() {
    this.init()
},
updated() {
    this.scroll?.refresh?.()
},
render() {
    return (
        <div
            class="bScroll-wrap"
            ref="wrap"
            style="height: 100%; overflow: hidden;"
        >
            <div class="bScroll-container">
                <div class="pullDown">
                </div>

                <div>
                    {this.$slots.default}
                </div>
            </div>
        </div>
    )
}

}

theniceangel commented 4 years ago

@cyanwin 可以参考 example 下的代码