1***@qq.com
1***@qq.com
  • 发布:2025-05-28 15:45
  • 更新:2025-05-28 15:45
  • 阅读:35

【报Bug】【报Bug】当页面同时存在input框,scroll-view,并且scroll-view设置下拉刷新,会唤起当前页面其他按钮(button)的点击事件 苹果手机也会出现,其他机型尚未测试

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

第三方开发者工具版本号: 随机

基础库版本号: 1.5.7

项目创建方式: CLI

CLI版本号: 3.0.0-4030620241128001

示例代码:
<template> <view class="active__box"> <view class="main_box"> <!-- 搜索 --> <view class="search_box"> <view class="search_main"> <view class="search_ipt"> <uni-easyinput placeholder="请输入" inputBorder="false" clearable
v-model="searchValue"
confirmType="search"
@clear="getWkordList1" maxlength="50" @confirm="getWkordList1"
primaryColor="#C6C7CB"
/>
</view>
<view class="search_icon" @click="getWkordList1">
<uni-icons type="search" size="24" color="#4D4D4D" />
</view>
</view>
</view>
<!-- 设备信息 -->
<view class="device_box">
<!-- 列表数据不为空 -->
<template v-if="dataList.length > 0">
<scroll-view show-scrollbar="true" scroll-y="true" lower-threshold="100" refresher-enabled="true" @scrolltolower="handleBottomOut"
@refresherrefresh="getWkordList1" refresher-triggered="requestLoading" >
<view class="pull_item">
<uni-collapse ref="collapse" accordion>
<uni-collapse-item
v-for="(item, index) in dataList" key="index" style="margin-bottom: 24rpx; background-color: #ffffff; border-radius: 16rpx"
>
<!-- 标题 -->
<template v-slot:title>
<view class="pull_item_title" @click="handleHint">
<view class="title_text">房间号/公区:</view>
<view class="title_content">
{{ dataList[index].newDeviceNumber }}
</view>
</view>
</template>
</uni-collapse-item>
</uni-collapse>
</view>
<!-- 页尾 -->
<view class="bottom_hint" v-show="dataList.length >= 10">
{{ total > dataList.length ? '— 加载中 —' : '— 到底了 —' }}
</view>
</scroll-view>
</template>
<!-- 列表数据为空 -->
<template v-else>
<view class="empty">
<view class="empty_hint" @click="getWkordList1">暂无数据,点击刷新~</view>
</view>
</template>
</view>
</view>
<!-- 页脚 -->
<view class="footer">
<button class="sign_btn" @click="handleSubmitTaskToast">111</button>
<button type="primary" class="change_btn" @click="handleSubmitTaskToast">222</button>
<button type="primary" class="change_btn" @click="handleSubmitTaskToast">333</button>
<button type="primary" class="save_btn" @click="handleSubmitTaskToast">444</button>
</view>
</view>
</template>

<script>
export default {
name: 'Install',
data() {
return {
total: 0, // 总数
requestLoading: false,
dataList: [], // 列表
searchValue: '' // 搜索值
}
},
onLoad() {
this.getWkordList1()
},

methods: {
async getWkordListHttp(params) {
return new Promise(resolve => {
setTimeout(() => {
const list = [{ newDeviceNumber: '1704900012' }]
if (params === '1704900012' || params === '') {
resolve(list)
} else {
resolve([])
}
}, 300)
})
},

async getWkordList1() {  
  this.pageIndex = 1  
  this.total = 0  
  this.requestLoading = true  
  try {  
    const res = await this.getWkordListHttp(this.searchValue || '')  
    this.dataList = []  
    const roomsList = res || []  
    this.dataList = roomsList  
    this.total = roomsList.length || 0  
    this.requestLoading = false  
    this.$nextTick(() => {  
      this.$refs.collapse?.resize()  
    })  
  } catch (error) {  
    this.requestLoading = false  
    console.warn(error)  
  }  
},  

// 打开提交任务弹窗  
handleSubmitTaskToast(e) {  
  console.warn('handleSubmitTaskToast', e)  
}  

}
}
</script>
<style lang="scss" scoped>
.activebox {
width: 100%;
height: 100%;
background-color: #f7f8fa;
.main_box {
width: 100%;
height: 100%;
padding-bottom: 144rpx;
display: flex;
flex-direction: column;
// 设备
.device_box {
height: calc(100% - 112rpx);
padding: 24rpx 24rpx 20rpx 24rpx;
&::v-deep .uni-collapse {
background-color: transparent;
}
.pull_item {
width: 100%;
height: auto;
background-color: #f7f8fa;
border-radius: 16rpx;
overflow: hidden;
.pull_item_title {
width: 100%;
height: 112rpx;
padding: 0rpx 32rpx;
line-height: 112rpx;
display: flex;
.title_text {
color: #717982;
width: 180rpx;
font-size: 28rpx;
}
}
&::v-deep .uni-collapse-item
title {
border-bottom-color: transparent;
}
&::v-deep .uni-collapse-itemtitle.is-open {
border-bottom-color: #f2f3f5 !important;
}
&::v-deep .uni-collapse-item
wrap {
border-bottom-left-radius: 16rpx !important;
border-bottom-right-radius: 16rpx !important;
}
&::v-deep .uni-collapse-itemwrap-content {
border-bottom: none !important;
}
}
.bottom_hint {
height: 50rpx;
line-height: 34rpx;
color: #86909c;
text-align: center;
margin-top: 24rpx;
}
}
// 空白
.empty {
width: 100%;
height: calc(100% - 362rpx);
position: relative;
.empty_img {
width: 360rpx;
height: 360rpx;
position: absolute;
top: 242rpx;
left: 50%;
margin-left: -180rpx;
}
.empty_hint {
width: 100%;
height: 40rpx;
line-height: 40rpx;
color: #86909c;
font-size: 28rpx;
text-align: center;
position: absolute;
top: 612rpx;
left: 0;
}
}
.search_box {
display: flex;
align-items: center;
width: 100%;
height: 112rpx;
flex-grow: 0;
flex-shrink: 0;
background-color: #ffffff;
padding: 0 24rpx;
.search_main {
display: flex;
width: 100%;
height: 76rpx;
background-color: #f7f8fa;
border-radius: 16rpx;
.search_ipt {
height: 100%;
width: calc(100% - 90rpx);
&::v-deep .uni-easyinput {
height: 100%;
padding-left: 20rpx;
.uni-easyinput
content {
height: 100%;
background-color: transparent !important;
}
.uni-easyinputplaceholder-class {
font-size: 28rpx !important;
color: rgb(192, 196, 204);
}
.uni-easyinput
content-input {
font-size: 28rpx !important;
padding-left: 0 !important;
}
}
}
.search_icon {
width: 90rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.main_box_p {
padding-bottom: 0rpx !important;
}
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
padding: 24rpx;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
width: 100%;
// height: 144rpx;
height: calc(144rpx + constant(safe-area-inset-bottom));
height: calc(144rpx + env(safe-area-inset-bottom));
background-color: #ffffff;
border-top: 2rpx solid #f2f3f5;
.sign_btn {
display: flex;
align-items: center;
justify-content: center;
width: 150rpx;
height: 100%;
background-color: #ffffff;
.sign_title {
font-size: 36rpx;
color: #999999;
}
}
.change_btn {
display: flex;
align-items: center;
justify-content: center;
width: 150rpx;
height: 100%;
background-color: $uni-color-primary;
}
.save_btn {
display: flex;
align-items: center;
justify-content: center;
width: 180rpx;
height: 100%;
background-color: $uni-color-primary;
}
}
}
// 按钮组
.btn {
height: 56rpx;
font-size: 24rpx;
padding: 12rpx 24rpx;
line-height: 32rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
margin-bottom: 20rpx;
}
.on_btn {
border: 2rpx solid #1677ff;
color: #1677ff;
}
.off_btn {
border: 2rpx solid #c9cdd4;
color: #1d2129;
}
.blue_btn {
background-color: #1677ff;
color: #ffffff;
border: none;
}
.disable_btn {
color: #bcbec2;
background-color: #f4f4f5;
border: 2rpx solid #e9e9eb;
pointer-events: none;
cursor: not-allowed;
}
</style>

操作步骤:

1.随机输入数字,
2.点击enter
3.随机触发当前页面按钮事件

预期结果:

不触发按钮

实际结果:

随机触发当前页面按钮事件

bug描述:

【报Bug】当页面同时存在input框,scroll-view,并且scroll-view设置下拉刷新,当触发input @confirm事件, 有很大几率唤起当前页面其他按钮(button)的点击事件
苹果手机也会出现,其他机型尚未测试

2025-05-28 15:45 负责人:无 分享
已邀请:

要回复问题请先登录注册