uni-app uni-easyinput 小程序页面滚动后上推错位

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app uni-easyinput 小程序页面滚动后上推错位

项目信息

项目信息 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.36
第三方开发者工具版本号 1.06.2404301
基础库版本号 3.6.4
项目创建方式 HBuilderX

示例代码：

<template>  
<view v-if="!isSubFlag || isEdit" class="contain">  
    <uni-forms ref="formRef" :model="formData" :rules="rules" label-position="top" label-width="200">  
        <view class="mb20" style="color: #4E5969;height: 500px;">1111</view>  
        <uni-forms-item label="大客户名称" name="companyName" required>  
            <uni-easyinput type="text" v-model="formData.companyName" placeholder="请输入大客户名称" />  
        </uni-forms-item>  
        <uni-forms-item label="预计需求房间数量" name="needRoomNum" required>  
            <uni-easyinput type="number" v-model="formData.needRoomNum" placeholder="请输入房间数量" />  
        </uni-forms-item>  
        <uni-forms-item label="公司联系人姓名" name="companyConnName" required>  
            <uni-easyinput type="text" v-model="formData.companyConnName" placeholder="请输入姓名" p/>  
        </uni-forms-item>  
        <uni-forms-item label="联系人手机号" name="companyConnPhone" required>  
            <uni-easyinput type="number" v-model="formData.companyConnPhone" placeholder="请输入手机号" />  
        </uni-forms-item>  
    </uni-forms>  
</view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            formData: {  
                companyName: '',  
                needRoomNum: '',  
                companyConnName: '',  
                companyConnPhone: '',  
                companyConnJob: '',  
                recommendName: '',  
                recommedPhone: '',  
                remark: '',  
                submitCustNo: '',  
                submitCustId: ''  
            },  
        };  
    },  
}  
</script>  
<style scoped lang="scss">  
.contain{  
height: 100%;  
 overflow-y: auto;  
}  
</style>

操作步骤：

  • 先在页面填充内容使页面可以滚动，将最外围的view设置滚动，滚动页面之后再去点击输入框

预期结果：

  • 输入框在正确的位置

实际结果：

  • 输入框错位了

bug描述：

  • 在小程序中使用uni-easyinput，adjust-position默认为true，滚动页面之后，输入框获取焦点，输入位置错位了

Harmonyos Next教程
1 回复

在开发基于uni-app框架的小程序时，遇到uni-easyinput组件在页面滚动后上推错位的问题，通常是由于组件的固定定位（fixed positioning）在滚动后没有正确更新其位置信息。以下是一些可能的解决方案和代码示例，帮助你解决这个问题。

解决方案一：监听页面滚动事件

通过监听页面的滚动事件，动态调整uni-easyinput组件的位置。你可以使用uni-app提供的onPageScroll事件来实现。

// 在页面的Page对象中添加onPageScroll方法
export default {
    data() {
        return {
            scrollTop: 0
        };
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
        // 根据scrollTop调整uni-easyinput的位置，如果需要的话
        // 例如：调整fixed位置的top值
        this.$nextTick(() => {
            const inputElement = this.$refs.myInput.$el.querySelector('.uni-easyinput__inner');
            if (inputElement) {
                inputElement.style.top = `${this.scrollTop + someOffset}px`;
            }
        });
    },
    methods: {
        // 其他方法
    }
}

在模板中，给uni-easyinput加上ref以便访问DOM元素：

<template>
    <view>
        <!-- 其他内容 -->
        <uni-easyinput ref="myInput" type="text" placeholder="请输入内容" />
        <!-- 其他内容 -->
    </view>
</template>

解决方案二：使用CSS sticky定位

如果uni-easyinput组件的固定定位要求不是非常严格，可以考虑使用CSS的sticky定位，它可以根据用户的滚动自动调整元素的位置。

.sticky-input {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 固定在顶部 */
    z-index: 999; /* 确保它不会被其他内容覆盖 */
}

在模板中，给uni-easyinput加上相应的class：

<template>
    <view>
        <!-- 其他内容 -->
        <uni-easyinput class="sticky-input" type="text" placeholder="请输入内容" />
        <!-- 其他内容 -->
    </view>
</template>

注意事项

  • 确保uni-easyinput组件的父级容器没有设置overflow: hidden，这可能会导致定位失效。
  • 如果使用了onPageScroll，注意性能优化，避免频繁操作DOM。
  • 尝试不同的CSS和JS组合，找到最适合你应用场景的解决方案。

以上方法提供了一种思路，具体实现可能需要根据你项目的实际情况进行调整。

回到顶部