9***@qq.com
9***@qq.com
  • 发布:2024-09-11 18:02
  • 更新:2025-06-24 14:01
  • 阅读:888

【报Bug】uni-datetime-picker日期选择框组件和uni-data-picker级联选择器在scroll-view中弹出展示被遮挡

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.24

手机系统: iOS

手机系统版本号: iOS 17

手机厂商: 苹果

手机机型: iPhone15

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

vue代码:

<template>  
  <view class="page container">  
    <uni-section title="操作栏" type="line">  
        <button class="mini-btn" type="primary" @click="addHandle" size="mini">  
            点我  
        </button>  
    </uni-section>  

    <uni-popup  
      ref="businessPopup"  
      background-color="#fff"  
      border-radius="15rpx 15rpx 15rpx 15rpx"  
    >  
      <view class="popConfig">  
        <view class="popConfig-title">{{ title }}</view>  
        <view class="popConfig-content">  
          <scroll-view  
            scroll-y  
            class="scrollView"  
            :scroll-into-view="scrollIntoView"  
            lower-threshold="140"  
            :scroll-with-animation="true"  
            @scrolltolower="scrollToView('uploadInvoice')"  
          >  
            <uni-forms ref="form" :modelValue="form" label-width="80px">  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
            </uni-forms>  
          </scroll-view>  
        </view>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
import dataJson from './data.json'  

export default {  
  data() {  
    return {  
      // 表单参数  
      form: {  
        time: "",  
        id: "",  
      },  
      title: "",  
      scrollIntoView: "",  
      dataInfo: dataJson,  
    };  
  },  
  watch: {},  
  created() {  
  },  
  methods: {  
    addHandle() {  
      this.title = "新增表单";  
      this.$refs.businessPopup.open();  
    },  
    closeBusinessPopup() {  
      this.$refs.businessPopup.close();  
    },  
    submitForm() {  
      return true;  
    },  
    scrollToView(viewId) {  
      if (this.scrollIntoView === viewId) {  
        this.scrollIntoView = "";  
      } else {  
        this.scrollIntoView = viewId;  
      }  
    },  
  },  

};  
</script>  

<style lang="scss">  
page {  
    background-color: #fff;  
}  
.cz_btn {  
  button {  
    margin-left: 10rpx;  
  }  
}  

.uni-searchbar {  
  background-color: #fff;  
}  

.scrollView {  
  background-color: #fff;  
  width: 100%;  
  height: 600rpx;  
}  

.popConfig {  
  z-index: 999;  
  background-color: white;  
  box-sizing: border-box;  
  padding: 25rpx;  
  width: 90vw;  
  min-height: 600rpx;  
  border-radius: 15rpx;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;  
  align-items: center;  

  .popConfig-title {  
    width: 100%;  
    font-size: 35rpx;  
    display: flex;  
    justify-content: space-around;  
    font-weight: 600;  
    padding: 10rpx 0 20rpx 0;  
  }  

  .popConfig-content {  
    width: 100%;  
    padding-bottom: 10px;  

    .popConfig-content-item-check {  
      border: 4rpx solid #5861d0ff;  
      background-color: #f7f7fc;  
    }  

    .popConfig-content-item-uncheck {  
      border: 4rpx solid #d9d9d9ff;  
      background-color: white;  
    }  

    .popConfig-content-item {  
      box-sizing: border-box;  
      padding: 10rpx 0;  
      border-radius: 15rpx;  
      display: flex;  
      flex-direction: column;  
      justify-content: space-between;  
      margin-bottom: 30rpx;  

      .radio-content {  
        width: 100%;  

        .uni-form-item {  
          // background-color: red;  
          width: 100%;  
          padding: 10rpx 0;  
          display: flex;  
          justify-content: space-between;  
          align-items: center;  

          view:nth-last-of-type(1) {  
            align-items: center;  
          }  

          .radio-content-picker {  
            .uni-input {  
              color: #7e7d96ff;  
              padding: 0;  
              background-color: rgba(220, 38, 38, 0);  
              line-height: 55rpx;  
            }  
          }  

          /deep/.uni-numbox__value[data-v-15947278] {  
            border: none;  
            background-color: #edededff;  
            min-width: 100rpx;  
            height: 55rpx;  
            margin: 0 15rpx;  
            // line-height: 55rpx;  
            // align-items: center;  
          }  

          /deep/.uni-numbox__minus[data-v-15947278],  
          /deep/.uni-numbox__plus[data-v-15947278] {  
            border-radius: 40rpx;  
            border: 2rpx solid #dfe3eb;  
            height: 55rpx;  
            background-color: white;  
          }  
        }  
      }  
    }  
  }  

  view {  
    img {  
      margin-top: 30rpx;  
      width: 150rpx;  
      height: 150rpx;  
    }  
  }  

  .popConfig-txt {  
    text-align: center;  

    .popConfig-title {  
      font-size: 40rpx;  
      color: #3b385aff;  
    }  

    .popConfig-des {  
      font-size: 35rpx;  
      color: #3b385aff;  
    }  
  }  

  .popConfig-btn {  
    display: flex;  
    flex-direction: row;  
    width: 100%;  
    justify-content: space-between;  
    z-index: 9;  

    button {  
      width: 35%;  
      height: 60rpx;  
      line-height: 60rpx;  
      background-color: #5861d0ff;  
      color: white;  
      border-radius: 40rpx;  
    }  

    button:nth-last-child(1) {  
      background-color: white;  
      color: #5861d0;  
      border: 2rpx solid #5861d0;  
    }  
  }  
}  
</style>  

data.json

[  
    {  
        "code": "9902",  
        "label": "北京分公司",  
        "value": "a4abb16b-0bce-4f5a-8337-c3e8bb1d0d6b",  
        "children": [  
            {  
                "code": "990225",  
                "label": "北京本部",  
                "value": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",  
                "children": [  
                    {  
                        "label": "222222",  
                        "code": "TEST2403jn01",  
                        "orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",  
                        "value": "7da99ce7-5768-4b8f-9026-3907072c5b2c"  
                    },  
                    {  
                        "code": "TEST2403bb01",  
                        "orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",  
                        "value": "bff749ea-2fc3-440c-a6d9-1911d65461d2",  
                        "label": "aaaaaaaaaaaaaaaaaaa"  
                    }  
                ]  
            },  
            {  
                "code": "990210",  
                "label": "业务一组",  
                "value": "05ed1a8c-406a-4a10-9ed2-2792a6014355",  
                "children": [  
                    {  
                        "orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",  
                        "code": "TEST2407jn01",  
                        "value": "40de6596-b27f-4e1d-984f-9794b5519057",  
                        "label": "qe"  
                    },  
                    {  
                        "code": "TEST2408jn02",  
                        "value": "5ecfa665-8206-4740-a9eb-c0dd26999f4f",  
                        "label": "41",  
                        "orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355"  
                    },  
                    {  
                        "label": "1111111",  
                        "orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",  
                        "value": "716e3c80-2201-4b41-a990-609feff9af04",  
                        "code": "TEST2404ly01"  
                    },  
                    {  
                        "label": "dsadasd",  
                        "orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",  
                        "value": "86fb29d7-a542-4ade-95d3-755c85fca7e4",  
                        "code": "TEST2407hl01"  
                    },  
                    {  
                        "label": "2121",  
                        "orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",  
                        "value": "f9611728-4e0e-45dd-a6a7-994f478a565d",  
                        "code": "TEST2407xa01"  
                    }  
                ]  
            }  
        ]  
    }  
]

操作步骤:

1、popup组件中使用scroll-view
2、scroll-view设置固定高度
3、scroll-view中使用表单组件
4、表单item数量撑满scroll-view的高度,scroll-view可竖向滑动
5、表单组件中使用uni-datetime-picker组件选择日期和级联选择框
6、对于popup和scroll-view样式代码已提供

预期结果:

ios真机中选择日期和安卓真机日期弹窗一样样式

实际结果:

ios真机日期选择组件的日期选择弹窗显示依旧异常

bug描述:

uni-datetime-picker日期选择框组件和uni-data-picker级联选择器在scroll-view中弹出展示被遮挡,scroll-view固定个高度,当forms-item撑不满scroll-view的高度时,展示是没有问题的,但是当forms-item到达一定数量后,把scroll-view固定高度撑满,可以竖向滑动时,uni-datetime-picker日期选择框组件和uni-data-picker级联选择器弹出时展示不全。
项目代码zip已上传
代码如下:

<template>  
  <view class="page container">  
    <uni-section title="操作栏" type="line">  
        <button class="mini-btn" type="primary" @click="addHandle" size="mini">  
            点我  
        </button>  
    </uni-section>  

    <uni-popup  
      ref="businessPopup"  
      background-color="#fff"  
      border-radius="15rpx 15rpx 15rpx 15rpx"  
    >  
      <view class="popConfig">  
        <view class="popConfig-title">{{ title }}</view>  
        <view class="popConfig-content">  
          <scroll-view  
            scroll-y  
            class="scrollView"  
            :scroll-into-view="scrollIntoView"  
            lower-threshold="140"  
            :scroll-with-animation="true"  
            @scrolltolower="scrollToView('uploadInvoice')"  
          >  
            <uni-forms ref="form" :modelValue="form" label-width="80px">  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择时间"  
                required  
                name="time"  
                label-width="100px"  
              >  
                <uni-datetime-picker  
                  type="date"  
                  v-model="form.time"  
                  placeholder="请选择时间"  
                ></uni-datetime-picker>  
              </uni-forms-item>  
              <uni-forms-item  
                label="选择项目"  
                required  
                name="time"  
                label-width="100px"  
              >  
              <uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>  
              </uni-forms-item>  
            </uni-forms>  
          </scroll-view>  
        </view>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
import dataJson from './data.json'  

export default {  
  data() {  
    return {  
      // 表单参数  
      form: {  
        time: "",  
        id: "",  
      },  
      title: "",  
      scrollIntoView: "",  
      dataInfo: dataJson,  
    };  
  },  
  watch: {},  
  created() {  
  },  
  methods: {  
    addHandle() {  
      this.title = "新增表单";  
      this.$refs.businessPopup.open();  
    },  
    closeBusinessPopup() {  
      this.$refs.businessPopup.close();  
    },  
    submitForm() {  
      return true;  
    },  
    scrollToView(viewId) {  
      if (this.scrollIntoView === viewId) {  
        this.scrollIntoView = "";  
      } else {  
        this.scrollIntoView = viewId;  
      }  
    },  
  },  

};  
</script>  

<style lang="scss">  
page {  
    background-color: #fff;  
}  
.cz_btn {  
  button {  
    margin-left: 10rpx;  
  }  
}  

.uni-searchbar {  
  background-color: #fff;  
}  

.scrollView {  
  background-color: #fff;  
  width: 100%;  
  height: 600rpx;  
}  

.popConfig {  
  z-index: 999;  
  background-color: white;  
  box-sizing: border-box;  
  padding: 25rpx;  
  width: 90vw;  
  min-height: 600rpx;  
  border-radius: 15rpx;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;  
  align-items: center;  

  .popConfig-title {  
    width: 100%;  
    font-size: 35rpx;  
    display: flex;  
    justify-content: space-around;  
    font-weight: 600;  
    padding: 10rpx 0 20rpx 0;  
  }  

  .popConfig-content {  
    width: 100%;  
    padding-bottom: 10px;  

    .popConfig-content-item-check {  
      border: 4rpx solid #5861d0ff;  
      background-color: #f7f7fc;  
    }  

    .popConfig-content-item-uncheck {  
      border: 4rpx solid #d9d9d9ff;  
      background-color: white;  
    }  

    .popConfig-content-item {  
      box-sizing: border-box;  
      padding: 10rpx 0;  
      border-radius: 15rpx;  
      display: flex;  
      flex-direction: column;  
      justify-content: space-between;  
      margin-bottom: 30rpx;  

      .radio-content {  
        width: 100%;  

        .uni-form-item {  
          // background-color: red;  
          width: 100%;  
          padding: 10rpx 0;  
          display: flex;  
          justify-content: space-between;  
          align-items: center;  

          view:nth-last-of-type(1) {  
            align-items: center;  
          }  

          .radio-content-picker {  
            .uni-input {  
              color: #7e7d96ff;  
              padding: 0;  
              background-color: rgba(220, 38, 38, 0);  
              line-height: 55rpx;  
            }  
          }  

          /deep/.uni-numbox__value[data-v-15947278] {  
            border: none;  
            background-color: #edededff;  
            min-width: 100rpx;  
            height: 55rpx;  
            margin: 0 15rpx;  
            // line-height: 55rpx;  
            // align-items: center;  
          }  

          /deep/.uni-numbox__minus[data-v-15947278],  
          /deep/.uni-numbox__plus[data-v-15947278] {  
            border-radius: 40rpx;  
            border: 2rpx solid #dfe3eb;  
            height: 55rpx;  
            background-color: white;  
          }  
        }  
      }  
    }  
  }  

  view {  
    img {  
      margin-top: 30rpx;  
      width: 150rpx;  
      height: 150rpx;  
    }  
  }  

  .popConfig-txt {  
    text-align: center;  

    .popConfig-title {  
      font-size: 40rpx;  
      color: #3b385aff;  
    }  

    .popConfig-des {  
      font-size: 35rpx;  
      color: #3b385aff;  
    }  
  }  

  .popConfig-btn {  
    display: flex;  
    flex-direction: row;  
    width: 100%;  
    justify-content: space-between;  
    z-index: 9;  

    button {  
      width: 35%;  
      height: 60rpx;  
      line-height: 60rpx;  
      background-color: #5861d0ff;  
      color: white;  
      border-radius: 40rpx;  
    }  

    button:nth-last-child(1) {  
      background-color: white;  
      color: #5861d0;  
      border: 2rpx solid #5861d0;  
    }  
  }  
}  
</style>
2024-09-11 18:02 负责人:无 分享
已邀请:
BFC

BFC

已确认bug, 感谢反馈,已加分

BFC

BFC

临时解决方案,页面下添加以下css样式, (vue3 需要scss 作用域穿透)

// #ifdef APP-IOS  
.uni-scroll-view {   
    -webkit-overflow-scrolling: auto;  
}  
// #endif

这样会导致ios滚动时没有惯性,但至少可以正常使用

  • 9***@qq.com (作者)

    收到,已测试,感谢

    2024-09-13 17:37

2***@qq.com

2***@qq.com

怎么解决的啊?

  • DCloud_UNI_JBB

    参考上面官方的回复 // #ifdef APP-IOS

    .uni-scroll-view {

    -webkit-overflow-scrolling: auto;

    }

    // #endif

    2025-06-24 12:03

  • 2***@qq.com

    好像不生效呢

    2025-06-24 13:33

2***@qq.com

2***@qq.com

// #ifdef APP-IOS
.uni-scroll-view {
-webkit-overflow-scrolling: auto;
}
// #endif 这么写不生效,是有版本限制吗

要回复问题请先登录注册