像素方舟_青阳
像素方舟_青阳
  • 发布:2021-08-10 11:34
  • 更新:2021-10-09 11:14
  • 阅读:494

【报Bug】nvue 安卓 picker-view 当picker-view-column 有6个时,显示错位,且某些选项无法选择

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Big Sur 11.2.3

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: MI 8

页面类型: nvue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="picker-mask">  
    <view class="picker-main">  
      <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="onChange">  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 20" :key="time">{{ time }}年</text>  
        </picker-view-column>  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 12" :key="time">{{ time }}月</text>  
        </picker-view-column>  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 30" :key="time">{{ time }}日</text>  
        </picker-view-column>  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 24" :key="time">{{ time }}时</text>  
        </picker-view-column>  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 60" :key="time">{{ time }}分</text>  
        </picker-view-column>  
        <picker-view-column>  
          <text class="picker-text" v-for="time in 60" :key="time">{{ time }}秒</text>  
        </picker-view-column>  
      </picker-view>  
    </view>  
  </view>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      value: [],  
      indicatorStyle: {  
        height: '70rpx',  
        borderTopWidth: '1rpx',  
        borderBottomWidth: '1rpx',  
        borderColor: '#f5f5f5'  
      }  
    }  
  },  
}  
</script>  

<style lang="scss" scoped>  
.picker-mask {  
  position: fixed;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  background: rgba(0, 0, 0, 0.5);  
}  

.picker-main {  
  position: fixed;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  overflow: hidden;  
  padding-top: 100rpx;  
  border-radius: 30rpx 30rpx 0 0;  
}  

.picker-view {  
  width: 750rpx;  
  height: 600rpx;  
  background: #fff;  
}  

.picker-text {  
  color: #333;  
  text-align: center;  
  font-weight: 400;  
  font-size: 32rpx;  
  line-height: 70rpx;  
}  
</style>

操作步骤:

在安卓机器上运行查看

预期结果:

显示不错位,能正常选择

实际结果:

显示错位,不能正常选择

bug描述:

nvue下 安卓 picker-view 当picker-view-column 大于3个时,显示错位。导致某些选项无法选择

3.2.6 测试问题还是存在,且ios和安卓都有问题

2021-08-10 11:34 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 3.2.5+ 已修复

  • 像素方舟_青阳 (作者)

    老哥,我本地测试看下了,现在苹果和安卓都有问题了,3.2.5-alpha

    2021-09-16 17:06

  • 阿里嘎多2077

    HBuilder X 3.2.9 依然出现此问题,picker-view-column 里面节点多了,在 nvue 页面也会错乱 。

    2021-10-09 11:12

  • 像素方舟_青阳 (作者)

    之前我在 alpha 3.2.5 测试了一下显示测试正常了,但是用最新正式版 3.2.9,问题又回来了,而且是iOS也有这个问题了

    2021-10-09 17:18

像素方舟_青阳

像素方舟_青阳 (作者)

除了显示问题,还会影响选择,例如最后选60秒,实际是选不上的

DCloud_UNI_Anne

DCloud_UNI_Anne

问题复现,后续优化,已加分,感谢您的反馈!

  • 像素方舟_青阳 (作者)

    请问这个问题何时解决?半个月过去了

    2021-08-27 17:25

阿里嘎多2077

阿里嘎多2077

HBuilder X 3.2.9,nvue 下依然会错位

要回复问题请先登录注册