BetterScroll不能滚动 具体原因不详

Question

vue页面中引入组件:czcbScroll:

<czcb-scroll :probeType="2" :bounce="false" :showPullUpTitle="false" :listenScroll="true"
                     @scroll="scrolling">
    <slot></slot>
</czcb-scroll>

czcbScroll组件代码：

<template>
<!-- 滚动组件，需要引用时候传入Props内的值 by_liyilei -->
<div ref="wrapper" class="list-wrapper">
    <div class="scroll-content">
        <div ref="listWrapper">
            <slot>
            </slot>
        </div>
        <slot name="pullup" :pullUpLoad="pullUpLoad" :isPullUpLoad="isPullUpLoad">
            <div class="pullup-wrapper" v-if="showPullUpTitle">
                <div class="before-trigger" v-if="!isPullUpLoad && isShowtext">
                    <span v-if="!pullUpDirty">没有更多数据了</span>
                    <span v-else>向上滑动加载更多</span>
                </div>
                <div class="after-trigger" v-if="isPullUpLoad">
                    <!-- <img class="loading-img" src="@a/loading.gif"> -->
                    <img class="loading-img" src="~@public/assets/img/[e-mail]">
                    <span class="loading-title">加载中...</span>
                </div>
                <div :class="isPullUpLoad ? 'distance2' : 'distance'"></div>
            </div>
        </slot>
    </div>
</div>
</template>

<script>
import BScroll from 'better-scroll';

//滚动方向
const COMPONENT_NAME = 'scroll';
const DIRECTION_H = 'horizontal';
const DIRECTION_V = 'vertical';

export default {
    name: COMPONENT_NAME,
    props: {
        probeType: {
            type: Number,
            default: 1
        },
        click: {
            type: Boolean,
            default: true
        },
        //控制拉倒尽头时候是否回弹
        bounce: {
            type: Boolean,
            default: true
        },
        listenScroll: {
            type: Boolean,
            default: false
        },
        listenScrollStart: {
            type: Boolean,
            default: false
        },
        listenScrollEnd: {
            type: Boolean,
            default: false
        },
        listenTouchEnd: {
            type: Boolean,
            default: false
        },
        direction: {
            type: String,
            default: DIRECTION_V
        },
        scrollbar: {
            type: Boolean,
            default: false
        },
        momentum: {
            type: Boolean,
            default: true
        },
        pullUpLoad: {
            type: null,
            default: false
        },
        startY: {
            type: Number,
            default: 0
        },
        refreshDelay: {
            type: Number,
            default: 20
        },
        freeScroll: {
            type: Boolean,
            default: false
        },
        mouseWheel: {
            type: Boolean,
            default: false
        },
        index: {
            type: Number,
            default: 0
        },
        showPullUpTitle: {
            type: Boolean,
            default: true
        },
        noInit: {
            type: Boolean,
            default: false
        },
        isWait: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            beforePullDown: true,
            isRebounding: false,
            isPullingDown: false,
            isPullUpLoad: false,
            isShowtext: false, // 是否显示底部文字
            pullUpDirty: false,
            pullDownStyle: '',
            isrefresh: false,
            scroll: '',
            //用于记录keep-alive状态下的scroll滚动位置
            scrollY: 0,
            tag: false
        };
    },
    watch: {
        //监听开启初始化的变量，进行初始化
        noInit(newVal) {
            if (!newVal) this.initScroll();
        }
    },
    computed: {},
    created() {},
    mounted() {
        setTimeout(() => {
            if (!this.isWait) this.initScroll();
        }, this.refreshDelay);
    },
    methods: {
        initScroll() {
            if (this.noInit) return;
            let options = {
                probeType: this.probeType,
                click: this.click,
                bounce: this.bounce,
                scrollY: this.freeScroll || this.direction === DIRECTION_V,
                scrollX: this.freeScroll || this.direction === DIRECTION_H,
                scrollbar: this.scrollbar,
                pullUpLoad: this.pullUpLoad,
                startY: this.startY,
                freeScroll: this.freeScroll,
                mouseWheel: this.mouseWheel,
                momentum: this.momentum
            };

            this.scroll = new BScroll(this.$refs.wrapper, options);

            //监听滚动时候，返回x和y的坐标对象
            if (this.listenScroll) {
                this.scroll.on('scroll', pos => {
                    this.$emit('scroll', pos);
                });
            }

            if (this.listenScrollStart) {
                this.scroll.on('scrollStart', () => {
                    if (this.isrefresh) {
                        this.refresh();
                    }
                    this.$emit('scrollStart');
                });
            }

            //  监听滚动结束
            if (this.listenScrollEnd) {
                this.scroll.on('scrollEnd', pos => {
                    this.$emit('scrollEnd', pos);
                });
            }

            //  监听鼠标/手指离开
            if (this.listenTouchEnd) {
                this.scroll.on('touchEnd', pos => {
                    this.$emit('touchEnd', pos);
                });
            }

            if (this.pullUpLoad) {
                //初始上拉加载的函数
                this._initPullUpLoad();
            }
            this.$emit('initScroll', this.scroll);
        },
        //禁止滚动
        disable() {
            this.scroll && this.scroll.disable();
            console.log('组件已经禁止滚动');
        },
        enable() {
            this.scroll && this.scroll.enable();
            console.log('组件已经开启滚动');
        },
        //强制停止滚动
        stop() {
            this.scroll && this.scroll.stop();
        },
        refresh() {
            this.scroll && this.scroll.refresh();
        },
        //滚到哪个坐标位置, time是滚动动画执行的时长（单位 ms）
        scrollTo(x, y, time) {
            this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
        },
        //el为{DOM | String}，offsetX Y {Number | Boolean}
        scrollToElement() {
            this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
        },
        //相对当前位置偏移滚动 x,y 的距离
        scrollBy(x, y, time) {
            this.scroll && this.scroll.scrollBy.apply(this.scroll, arguments);
        },
        destroy() {
            this.scroll.destroy();
        },
        //重新初始化滚动组件
        forceUpdate(dirty) {
            this.isShowtext = true; // 显示底部文字
            this.pullUpDirty = dirty; // 判断显示哪个文字
            const innerFn = () => {
                this.isPullUpLoad = false;
                // this.scroll.finishPullUp();
                this.isrefresh = true;
                this.$parent.$nextTick(() => {
                    this.refresh();
                });
            };
            if (dirty == false) {
                this.tag = true;
                innerFn();
                // this.scroll.finishPullUp();
                return;
            }
            this.tag = false;
            if (this.pullUpLoad && this.isPullUpLoad) {
                innerFn();
                this.scroll.finishPullUp();
            } else {
                this.refresh();
            }
        },
        _initPullUpLoad() {
            this.scroll.on('pullingUp', () => {
                // if(!this.pullUpLoad) return;
                //    !this.tag ? (this.tag = this.pullUpDirty = true) : '';
                if (this.tag) return;
                this.pullUpDirty = true;
                if (this.pullUpDirty) {
                    this.isPullUpLoad = true;
                }
                this.$emit('pullingUp', this.index);
                this.isrefresh = false;
            });
        },
        //重置滚动组件
        resetScroll() {
            this.pullUpDirty = true;
            this.tag = false;
            this.isPullUpLoad = true;
            this.isrefresh = false;
        }
    },
    activated() {
        if (this.scroll) {
            this.scroll.scrollTo(0, this.scrollY);
        }
    },
    deactivated() {
        if (this.scroll) {
            this.scrollY = this.scroll.y;
        }
    }
};
</script>

<style lang="scss">
.list-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
    .scroll-content {
        position: relative;
        z-index: 1;
    }
    .list-content {
        position: relative;
        z-index: 10;
    }
    .list-item {
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.18rem;
        padding-left: 0.2rem;
        border-bottom: 1px solid #e5e5e5;
    }
    .pulldown-wrapper {
        position: absolute;
        width: 100%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all;
    }
    .pullup-wrapper {
        width: 100%;
        text-align: center;
        padding-top: 0.16rem;
        .before-trigger {
            font-size: 0;
            span {
                font-size: 0.22rem;
                line-height: 0.3rem;
                color: #b3b3b3;
            }
        }
        .after-trigger {
            font-size: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.04rem;
            }
            .loading-title {
                font-size: 0.18rem;
                line-height: 0.3rem;
                color: #666;
            }
            .loading-img {
                animation: rotate 0.8s linear infinite;
            }
            @keyframes rotate {
                from {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        }
        .distance {
            // 会被scroller拖下去30px
            height: 0.86rem;
            width: 100%;
        }
        .distance2 {
            height: 0.6rem;
            width: 100%;
        }
    }
}

</style>

不能用手势拖动滚动，但是鼠标滚轮可以滚动，大神能帮我看下那儿出错了么？远程协助是最好了

Answer 1

已解决https://www.cnblogs.com/xiaoh...
原因是父容器wrapper高度没有固定