better-scroll 当内容高度低于容器高度,下拉取值取不到,全都是x:0, y:0

  • 请问,要怎么设置才可以在内容高度低于容器高度可以取值?~
<template>
    <div ref='wrapper'>
        <slot></slot>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    props: {
        probeType: {
            type: Number,
            default: 1
        },
        data: {
            type: Array | Object,
            default: null
        },
        pulldown: {
            type: Boolean,
            default: true
        }
    },
    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,
                pulldown: this.pulldown
            })
            if (this.pulldown) {
                this.scroll.on('touchEnd', (pos) => {
                    console.log(pos)
                    if (pos.y > 50) {
                        this.$emit('pulldown')
                    }
                })
            }
        },
        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>
  • 页面引用
<template>
    <div>
        <van-loading v-if="showLoading" type="spinner" color="#fff" size="50px"/>
        <div class="charging useHeight">
             <scroll class="scroll-wrapper">
                <div class="chargeList">
                    <dl>
                        <dt>
                            <em>充电中</em>
                            <span>查看详情</span>
                        </dt>
                        <dd>
                            <div class="label">设备信息</div>
                            <div class="infor">这里是设备信息</div>
                        </dd>
                        <dd>
                            <div class="label">设备信息</div>
                            <div class="infor">这里是设备信息</div>
                        </dd>
                        <dd>
                            <div class="label">设备信息</div>
                            <div class="onOff">
                                <div><span class="green"/>开</div>
                                <div><span class="gray"/>关</div>
                            </div>
                        </dd>
                    </dl>
                </div>
            </scroll>
        </div>
    </div>
</template>
<script>
import scroll from 'module/scroll'
import vHeader from 'module/header'
export default {
    name: 'charging',
    components: {
        vHeader,
        scroll
    },
    methods: {
        back () {
            console.log(11)
        }
    }
}
</script>
<style lang="less" scoped>
@import '~style/variables.less';
@import './index.less';
</style>
  • 这个时候拖动页面,取得值

clipboard.png

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题