uni-app nvue 安卓 picker-view 当picker-view-column 有6个时显示错位且某些选项无法选择

uni-app nvue 安卓 picker-view 当picker-view-column 有6个时显示错位且某些选项无法选择

开发环境 版本号 项目创建方式
Mac macOS 11.2.3 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>

更多关于uni-app nvue 安卓 picker-view 当picker-view-column 有6个时显示错位且某些选项无法选择的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HBuilderX alpha 3.2.5+ 已修复

更多关于uni-app nvue 安卓 picker-view 当picker-view-column 有6个时显示错位且某些选项无法选择的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

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

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

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

HBuilder X 3.2.9，nvue 下依然会错位

在nvue页面中，当picker-view-column数量较多时（如6列），确实可能出现显示错位和选项无法选择的问题。这主要是由于nvue渲染机制与vue页面不同导致的。

主要原因：

  1. nvue使用原生渲染，picker-view在Android平台有列数限制
  2. 多列picker-view在nvue中可能存在布局计算问题
  3. 原生组件对复杂布局的支持有限

解决方案：

  1. 减少列数：考虑将6列拆分为两个picker-view，或者使用其他选择方式
  2. 使用vue页面：如果必须使用6列picker，建议改用vue页面而非nvue
  3. 调整布局：尝试固定每列的宽度，避免自动分配导致的错位
<!-- 为每列设置固定宽度 -->
<picker-view style="width: 750rpx;">
  <picker-view-column style="width: 125rpx;">
    <!-- 内容 -->
  </picker-view-column>
  <!-- 其他列 -->
</picker-view>
回到顶部