Closed ghost closed 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> ) }
}
@cyanwin 可以参考 example 下的代码
"@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()
}