2***@qq.com
2***@qq.com
  • 发布:2024-10-16 10:53
  • 更新:2024-10-16 10:53
  • 阅读:63

【报Bug】uni-collapse组件在苹果手机上折叠后,仍然可点击到折叠了的内容

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 家庭中文版 22631.4317

HBuilderX类型: 正式

HBuilderX版本号: 4.29

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

基础库版本号: 3.4.6

项目创建方式: HBuilderX

示例代码:
复制代码<uni-collapse ref="collapse" accordion>  
        <uni-collapse-item  
            v-for="(form,index) in userList" :key="index"  
            :name="index"  
            open  
        >  
          <template v-slot:title>  
            <view class="collItem">  
              <text>{{ index + 1 }}: {{form.nickname}}</text>  
              <button type="warn" size="mini" @click.native="deleteUser(index)">删除</button>  
            </view>  
          </template>  
          <u-form :model="form" labelPosition="top"  
                   :labelStyle="{fontSize:'28rpx',fontWeight:'700',width:'400rpx'}">  
            <u-form-item>  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                开课时间  
              </text>  
              <u-input fontSize='28rpx' :disabled="true" disabledColor="#FFFFFF" v-model="form.coursePlanName"  
                       placeholder="请选择" @click.native="onCoursePlanClick(index)">  
                <view slot="suffix">  
                  <u-icon name="arrow-down-fill" size="12"></u-icon>  
                </view>  
              </u-input>  
            </u-form-item>  
            <u-form-item>  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                学员姓名  
              </text>  
              <u-input fontSize='28rpx' v-model="form.nickname" placeholder="请输入您的姓名"></u-input>  
            </u-form-item>  
            <u-form-item>  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                学员电话  
              </text>  
              <u-input fontSize='28rpx' type="number" v-model="form.phone" placeholder="请输入您的电话"  
                       @change="onTelChange($event, index)"></u-input>  
            </u-form-item>  
            <u-form-item>  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                公司名称  
              </text>  
              <u-input fontSize='28rpx' v-model="form.cusName" :readonly="form.companyId"  
                       placeholder="请输入公司名称"></u-input>  
            </u-form-item>  
            <u-form-item v-if="currentUser.companyId && course.type===0">  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                身份证号码  
              </text>  
              <u-input fontSize='28rpx' v-model="form.idCard" @change="onInputIdCard($event, index)"  
                       placeholder='请输入证件号码'></u-input>  
            </u-form-item>  

            <u-form-item v-if="course.type===0 && currentUser.companyId">  
              <picker mode="date" :value="form.birthday" :start="startDate" :end="endDate"  
                      @change="bindDateChange($event, index)">  
                <text slot="label" class="title">  
                  <text class="req">*</text>  
                  生日  
                </text>  
                <u-input fontSize='28rpx' :disabled="true" disabledColor="#FFFFFF" v-model="form.birthday"  
                         placeholder="请选择">  
                  <view slot="suffix">  
                    <u-icon name="arrow-down-fill" size="12"></u-icon>  
                  </view>  
                </u-input>  
              </picker>  
            </u-form-item>  
            <u-form-item v-if="currentUser.companyId">  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                职务  
              </text>  
              <u-input fontSize='28rpx' v-model="form.job" placeholder="请输入职务"></u-input>  
            </u-form-item>  

            <u-form-item v-if="course.type===0 && currentUser.companyId">  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                身高  
              </text>  
              <u-input fontSize='28rpx' type="digit" v-model="form.height" placeholder="请输入身高">  
                <text slot="suffix">cm</text>  
              </u-input>  
            </u-form-item>  
            <u-form-item v-if="course.type===0 && currentUser.companyId">  
              <text slot="label" class="title">  
                <text class="req">*</text>  
                体重  
              </text>  
              <u-input fontSize='28rpx' type="digit" v-model="form.weight" placeholder="请输入体重(千克)">  
                <text slot="suffix">kg</text>  
              </u-input>  
            </u-form-item>  
          </u-form>  
        </uni-collapse-item>  
      </uni-collapse>  
      <view class="addBtn uni-row-center" @click="addUser">  
        添加  
      </view>  
      <view class="btn uni-row-center" @click="submitApplicationClick">  
        提交预约  
      </view>
复制代码    addUser() {  
      // 省略添加数据  

      uni.pageScrollTo({scrollTop:0})  
      // 用户使用的版本没有下面这段  
      // #ifdef MP  
      this.$nextTick(() => {  
        this.$refs.collapse.resize()  
      })  
      // #endif  
    },

操作步骤:

见附件用户苹果13操作视频

预期结果:

正确布局,不会覆盖掉提交预约按钮,不会唤起输入框

实际结果:

看似布局正确,实际覆盖掉了提交预约按钮

bug描述:

展开后的内容
据用户苹果13操作视频显示,用户点击提交预约按钮。却唤起了已经折叠掉的学员姓名输入框
提交预约按钮好像是显示在这个位置,但是并没有触发提交预约的onclick方法,点击这个位置,实际是点击到了已经折叠掉的部分

安卓机器测试没任何问题。我们这边只有一台苹果15,只要学员数量合适,提交预约按钮正好和某个输入框部分重合的话,点击特定的位置。能够唤起已经折叠掉的输入框。但是同时也能成功触发提交预约的onclick方法,不会像用户提供的视频里这样点了没反应
线上版本并没有使用
// #ifdef MP
this.$nextTick(() => {
this.$refs.collapse.resize()
})
// #endif
现在自测,发现用不用这段代码,结果是一样的

2024-10-16 10:53 负责人:无 分享
已邀请:

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容