小程序 onPageScroll监听滚动结束_taro 监听页面滚动

需求：当用户滑动页面的时候切换品牌的页签缩退，当用户停止滑动的时候页签展示完全

HTML代码：

<!-- OnePlus/OPPO的切换 -->
        <view
            v-if="currentBrand === 'onePlus'"
            class="oppo-arrow"
            :class="scrollIng ? 'hide' : ''"
            @click="changeBrand('oppo')"
        >
            <view class="img-back">
                <view class="semi-circle"></view>
                <view class="square"></view>
            </view>
            <image src="../../static/oppo-logo-brand.png" mode="widthFix" class="img-brand"></image>
        </view>
        <view
            v-if="currentBrand === 'oppo'"
            class="onePlus-arrow"
            :class="scrollIng ? 'hide' : ''"
            @click="changeBrand('onePlus')"
        >
            <view class="img-back">
                <view class="semi-circle"></view>
                <view class="square"></view>
            </view>
            <image src="../../static/oneplusLogo.png" mode="widthFix" class="img-brand"></image>
        </view>

 css样式：使用了transition过渡属性，以达到动画的效果

.oppo-arrow {
    position: fixed;
    right: 0;
    bottom: 100rpx;
    width: 108rpx;
    height: 96rpx;
    transition: right 0.5s ease-out; // 伸缩的动态效果
    z-index: 100;
}
.oppo-arrow.hide {
    right: -72rpx;
}
.onePlus-arrow {
    position: fixed;
    right: 0;
    bottom: 100rpx;
    width: 108rpx;
    height: 96rpx;
    transition: right 0.5s ease-out; // 伸缩的动态效果
    z-index: 100;
}
.onePlus-arrow.hide {
    right: -72rpx;
}
.oppo-arrow,
.onePlus-arrow {
    .img-back {
        display: flex;
        position: absolute;
        left: 0;
        width: 108rpx;
        height: 96rpx;
        background: #ffffff;
        border: 0.6px solid rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
        border-radius: 48rpx 0 0 48rpx;
        .semi-circle {
            width: 48rpx;
            height: 96rpx;
            border-radius: 96rpx 0 0 96rpx;
            background-color: #fff;
        }
        .square {
            width: 60rpx;
            height: 96rpx;
            background-color: #fff;
        }
    }
    .img-brand {
        position: absolute;
        left: 12rpx;
        top: 12rpx;
        width: 72rpx;
    }
}

js代码：把钩子函数onPageScroll封装成自执行闭包函数，同时使用了防抖

// 小程序的钩子函数
onPageScroll: (function () {
        let timer = null;
        return function (e) {
            console.log("在滚动");
            // 监听页面的滚动开始和结束
            clearTimeout(timer);
            this.scrollIng = true;
            timer = setTimeout(() => {
                console.log("滚动结束");
                this.scrollIng = false;
            }, 500);
            this.scrollTop = e.scrollTop;
        };
    })(),

这里最初代码是这样写的（没有使用自执行函数）

    data(){
        return {
            timer:null
        }
    }
 
 
    onPageScroll() {
            this.scrollTop = e.scrollTop;
            console.log("在滚动");
            // 监听页面的滚动开始和结束
            clearTimeout(timer);
            this.scrollIng = true;
            timer = setTimeout(() => {
                console.log("滚动结束");
                this.scrollIng = false;
            }, 500);
           
        };
    }

这么写的时候，发现有错乱的情况，滚动和滚动结束的执行都很奇怪，最后猜测可能是钩子函数onPageScroll的自身问题。