uni-app HBuliderX升级至最新版本（3.2.9）时页面滚动吸顶效果不生效

产品分类	PC开发环境操作系统	PC开发环境操作系统版本号	HBuilderX版本号
HbuilderX	Windows	18363	3.2.9

### bug描述：

HBuliderX升级至最新版本（3.2.9）时，页面的滚动吸顶效果不生效

### 示例代码：
```html
<template>  
    <view class="authen">  
        <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" :scroll-into-view="intoindex">  
            <view class="auth-top mt20">  
                <image class="auth-logo" src="../../static/authen/ico-logo.png" mode="aspectFit"></image>  
                <text class="auth-t">放心预约名医看诊</text>  
                <image class="auth-zh" src="../../static/authen/auth-zh.png" mode="widthFix"></image>  
            </view>  
            <view class="auth-lab-h"  id="jump0">  
                <view class="auth-lab-s" :class="{'is-fixed': isFixed}">  
                    <view class="auth-lab">  
                        <text :class="current == 0 ? 'active' : ''" @click="labjump(0)">医生团队</text>  
                        <text :class="current == 1 ? 'active' : ''" @click="labjump(1)">行业资质</text>  
                        <text :class="current == 2 ? 'active' : ''" @click="labjump(2)">放心服务</text>  
                    </view>  
                </view>  
            </view>  
            <view class="auth-box">  
                <view class="ab-tit">医生团队</view>  
                <text class="ab-sub">严格审核医生入驻资质</text>  
                <text class="ab-text">为保证入驻的医生真实可靠、专业能力强，我们对医生的资质进行了严格的审核。</text>  
                <view class="ab-list">  
                    <view>  
                        <image src="../../static/authen/ico-card.png" mode="aspectFit"></image>  
                        <view class="ab-info">  
                            <text class="info-h4">四证齐全</text>  
                            <text>入驻医生必须拥有医生资格证、医师技术资格证、医师执业证、身份证4项证件。</text>  
                        </view>  
                    </view>  
                    <view id="jump1">  
                        <image src="../../static/authen/ico-cardsh.png" mode="aspectFit"></image>  
                        <view class="ab-info">  
                            <text class="info-h4">证件查询</text>  
                            <text>平台将机构证件与国家卫生健康委员会网站上的信息进行严格人工比对，确保证件真实有效。</text>  
                        </view>  
                    </view>  
                </view>  
            </view>  
            <view class="auth-box">  
                <view class="ab-tit">行业资质</view>  
                <text class="ab-sub">严格审核合作机构资质</text>  
                <text class="ab-text">为保证合作机构真实可靠、服务正规，我们对合作机构的资质进行了严格的审核。确保可以提供安全可靠的预约挂号、互联网诊疗服务。</text>  
                <view class="ab-list">  
                    <view>  
                        <image src="../../static/authen/ico-card.png" mode="aspectFit"></image>  
                        <view class="ab-info">  
                            <text class="info-h4">证件齐全</text>  
                            <text>合作机构必须拥有医疗机构执业许可证。</text>  
                        </view>  
                    </view>  
                    <view id="jump2">  
                        <image src="../../static/authen/ico-cardsh.png" mode="aspectFit"></image>  
                        <view class="ab-info">  
                            <text class="info-h4">证件查询</text>  
                            <text>平台将机构证件与国家卫生健康委员会网站上的信息进行严格人工比对，确保证件真实有效。</text>  
                        </view>  
                    </view>  
                </view>  
            </view>  
            <view class="auth-box mb20">  
                <view class="ab-tit">放心服务</view>  
                <text class="ab-sub">严格审核 双重质控</text>  
                <text class="ab-text">注重用户隐私保护，确保系统用户信息安全。同时医学团队严格质控，监督医生专业性及服务态度，提升用户体验。</text>  
                <view class="ab-other">  
                    <view>  
                        <image src="../../static/authen/ico-server.png" mode="aspectFit"></image>  
                        <text>严审服务质量</text>  
                    </view>  
                    <view>  
                        <image src="../../static/authen/ico-privacy.png" mode="aspectFit"></image>  
                        <text>隐私信息保护</text>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  
    </view>  
</template>  
<script>  
    const app = getApp();  
    export default {  
        components: {  

        },  
        data() {  
            return {  
                scltop: 0,  
                isFixed: false,  
                current: 0,  
                intoindex: ''  
            }  
        },  
        mounted() {  
            const query = uni.createSelectorQuery().in(this);  
            query.select('#jump0').boundingClientRect(data => {  
              this.scltop = data.top  
            }).exec();  
        },  
        onLoad() {  

        },  
        methods: {  
            scroll(e){  
                if(e.detail.scrollTop > this.scltop){  
                    this.isFixed = true  
                }else{  
                    this.isFixed = false  
                }  
            },  
            labjump(index){  
                this.current = index  
                this.intoindex = 'jump' + index  
            }  
        }  
    };  
</script>  

<style scoped>  
page{ height: 100%;}  
.authen{ flex:1;}  
.authen scroll-view{height:100vh;}  
.auth-top{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx;padding: 40rpx 30rpx 30rpx 30rpx; margin: 0 20rpx;position: relative;z-index: 21;}  
.auth-logo{display: block; width: 90rpx;height: 90rpx;margin: 0 auto;}  
.auth-t{text-align: center;display: block;font-size: 40rpx;color: #1b68eb;font-weight: bold;margin-top: 25rpx;}  
.auth-zh{ width: 100%;height: auto;margin-top: 40rpx;}  
.auth-lab-h{ height: 120rpx;}  
.auth-lab-s{width: 100%;height: 120rpx;background-color: #fff; padding-top: 20rpx;box-sizing: border-box;}  
.is-fixed{position: fixed;left: 0;top: 0;z-index: 20;}  
.auth-lab{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx; display: flex;margin: 0  20rpx;}  
.auth-lab > text{ flex:1;display: block;height: 100rpx;line-height: 100rpx;text-align: center;}  
.auth-lab > .active{ color: #1b68eb;position: relative;}  
.auth-lab > .active::before{content: '';display: block;width: 68rpx;height: 8rpx;background-color: #1b68eb;position: absolute;left: 50%;margin-left: -34rpx;bottom: 0;border-radius: 5rpx;}  
.auth-box{ box-shadow: 0 0 10px rgba(0,0,0,.08); border-radius: 30rpx; display: flex; margin: 20rpx 20rpx 0 20rpx;flex-direction: column;padding: 35rpx 30rpx 30rpx 30rpx; line-height: 1.4;}  
.mt20{ margin-top: 20rpx;}  
.mb20{ margin-bottom: 20rpx;}  
.ab-tit{ font-size: 40rpx;text-align: center;font-weight: bold;color: #000;}  
.ab-sub{ text-align: center;font-size: 34rpx;color: #666;margin-top: 10rpx;}  
.ab-text{font-size: 32rpx;color: #999;margin-top: 15rpx;}  
.ab-list{}  
.ab-list > view{ display: flex; margin-top: 24rpx ; }  
.ab-list > view image{ width: 66rpx;height: 66rpx; margin: 0 20rpx 0 0;}  
.ab-info{flex:1;display: flex;flex-direction: column;font-size: 28rpx;color: #999;}  
.info-h4{font-size: 32rpx;color: #333;font-weight: bold;margin-bottom: 10rpx;}  
.ab-other{ display: flex; margin-top: 30rpx;}  
.ab-other > view{ flex:1;display: flex;flex-direction: column;align-items: center;}  
.ab-other > view image{ width: 66rpx;height: 66rpx;margin-bottom: 20rpx;}  
</style>

更多关于uni-app HBuliderX升级至最新版本（3.2.9）时页面滚动吸顶效果不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

问题已确认，下个版本会修复，已加分，感谢您的反馈！

更多关于uni-app HBuliderX升级至最新版本（3.2.9）时页面滚动吸顶效果不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 2楼

根据你的代码和描述，问题很可能出在 scroll-view 的滚动事件监听上。在 uni-app 中，scroll-view 组件的 @scroll 事件返回的 scrollTop 值在某些版本中可能存在差异。

解决方案：

检查滚动事件返回值： 在 scroll 方法中添加日志，确认 e.detail.scrollTop 的值是否正确：

scroll(e) {
    console.log('scrollTop:', e.detail.scrollTop);
    if (e.detail.scrollTop > this.scltop) {
        this.isFixed = true;
    } else {
        this.isFixed = false;
    }
}

使用页面滚动替代： 如果 scroll-view 的滚动事件不准确，可以改用页面滚动。将 scroll-view 改为普通 view，并使用 onPageScroll 生命周期函数：

<template>
    <view class="authen">
        <!-- 移除 scroll-view，改为普通 view -->
        <view class="content">
            <!-- 原有内容 -->
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            isFixed: false,
            scltop: 0
        };
    },
    onPageScroll(e) {
        if (e.scrollTop > this.scltop) {
            this.isFixed = true;
        } else {
            this.isFixed = false;
        }
    },
    mounted() {
        const query = uni.createSelectorQuery().in(this);
        query.select('#jump0').boundingClientRect(data => {
            this.scltop = data.top;
        }).exec();
    }
};
</script>

调整样式： 如果改用页面滚动，需要确保页面高度足够，并调整样式：
```
page {
    height: 100%;
}
.authen {
    min-height: 100vh;
}
```

uni-app HBuliderX升级至最新版本（3.2.9）时 页面滚动吸顶效果不生效

uni-app HBuliderX升级至最新版本（3.2.9）时页面滚动吸顶效果不生效