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

产品分类

uniapp/小程序/微信

示例代码：

<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>
.active__box {
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-item__title.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-item__wrap-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-easyinput__placeholder-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>