1***@qq.com
1***@qq.com
  • 发布:2023-08-04 17:29
  • 更新:2023-08-08 14:29
  • 阅读:406

【报Bug】uni-search-bar组件Bug

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 苹果

手机机型: iPhone 14 pro

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <view class="containerTop">  
            <uni-search-bar  
                v-model="searchVal"  
                fixed  
                class="searchArea"  
                radius="5"  
                placeholder="请输入姓名,年龄"  
                clearButton="auto"  
                cancelButton="none"  
                @confirm="search"  
                @clear="clear"  
                @input="searchInput"  
            ></uni-search-bar>  
        </view>  
        <view class="" style="height: 90rpx">  

        </view>  
        <view class="List">  
            <view class="List_List" v-for="item in rawList_new" :key="item.id">  
                <view class="">ID:{{ item.id }}</view>  
                <view class="">姓名:{{ item.name }}</view>  
                <view class="">年龄:{{ item.age }}</view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            searchVal: '',  
            List: [  
                { id: 1, name: '李华', age: '23' },  
                { id: 2, name: '李人', age: '54' },  
                { id: 3, name: '李改好', age: '22' },  
                { id: 4, name: '李更换', age: '44' },  
                { id: 5, name: '李拿', age: '56' },  
                { id: 6, name: '拿到', age: '45' },  
                { id: 7, name: '地方', age: '234' },  
                { id: 8, name: '更换', age: '45' },  
                { id: 9, name: '环境', age: '56' },  
                { id: 10, name: '几节课', age: '67' },  
                { id: 11, name: '许', age: '67' },  
                { id: 12, name: '水电费', age: '8' }  
            ],  
            rawList_new:[]  
        };  
    },  
    watch: {  
        searchVal: {  
            handler(val) {  
                this.search();  
            }  
        },  
    },  
    mounted() {  
        this.rawList_new = this.List  
    },  
    methods: {  
        search() {  
            this.rawList_new = []  
            let _this = this  
            setTimeout(function(){  
                _this.rawList_new = _this.List.filter(i => (i.name && i.name.indexOf(_this.searchVal) !== -1) || (i.age && i.age.indexOf(_this.searchVal) !== -1));  
            }, 500)  
        },  
        clear() {  
            this.rawList_new = this.List  
        },  
        searchInput() {}  
    }  
};  
</script>  

<style>  
.container {  
    padding: 20px;  
    font-size: 14px;  
    line-height: 24px;  
}  
.containerTop {  
    position: fixed;  
    width: 100%;  
    top: 0rpx;  
    left: 0;  
    background-color: #fff;  
}  

.List_List {  
    width: 80%;  
    height: 300rpx;  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
    background: red;  
    margin-bottom: 20rpx;  
}  
</style>  

操作步骤:

使用uni-app自带的搜索组件uni-search-bar在列表页面进行固定定位在头部,向下滑动页面,搜索只能查到一条数剧的参数,此时点击软件盘的搜索按钮,或者收起软件盘,页面会卡死,并且获取列表DOM元素的节点,top,与bottom为一个负值

预期结果:

列表正常展示,页面不会卡死,输入框可以继续点击

实际结果:

列表没有数据,页面卡死,输入框不可以点击

bug描述:

使用uni-app自带的搜索组件uni-search-bar在列表页面进行固定定位在头部,向下滑动页面,搜索只能查到一条数剧的参数,此时点击软件盘的搜索按钮,或者收起软件盘,页面会卡死,并且获取列表DOM元素的节点,top,与bottom为一个负值

2023-08-04 17:29 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

@iOS_DJX

1***@qq.com

1***@qq.com (作者)

@DCloud_iOS_LZY ,@@DCloud_iOS_WZT ,@@DCloud_iOS_XHY ,@@DCloud_IOS_XTY

1***@qq.com

1***@qq.com (作者)

问题已解决,需要把列表遍历的数据放在scroll-view里面,要不然就会出现滚动DOM 过多页面,top与bottom出现为负值的情况

要回复问题请先登录注册