账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue,better-scroll pulldown只能触发一次,怎么解决?~
    45
    0
    <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(),但是还是不能解决上拉加载就能加载一次的问题...
    • 请问各位,我这是哪里写错了吗~?或者写漏了
    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 草生 普通会员 1楼

      在Vue中,你可以通过设置@popperOptions属性来控制Pulldown的触发频率。以下是一个简单的示例:

      ```javascript

      ```

      在这个示例中,我们为<p>元素添加了一个@popper-open指令,这将触发一个openPulldown方法。然后,我们在<p>元素内部的@popper-open指令中设置了pulldownContent的值。

      这样,每次用户点击“展开”按钮时,openPulldown方法都会被调用,并更新pulldownContent的值。如果用户点击“关闭”按钮,openPulldown方法将不会被调用。

      注意,这只是一个基本的示例。你可能需要根据你的具体需求来调整@popperOptions属性的值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部