uni-app nvue picker-view-column 高度有问题

uni-app nvue picker-view-column 高度有问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 小米
手机机型 米6
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view class="optionsSelect cloumn" :class="showOption?'show-option':''">  
    <view class="option-hd row">  
        <text class="option-btn" @click.stop="closeOption">取消</text>  
        <text class="title">配送时间</text>  
        <text class="option-btn" @click.stop="confirmOption">确定</text>  
    </view>  
    <view class="option-bd">  
        <picker-view class="option-pick" v-if="showOption" :value="value" @change="bindChange">  
            <picker-view-column class="picker-view-column">  
                <text class="option-item" v-for="(item,index) in timeList">{{item}}</text>  
            </picker-view-column>  
        </picker-view>  
    </view>  
</view>

操作步骤：

  • 使用picker-view

预期结果：

  • 选项高度正常

实际结果：

  • 选项高度不正常

bug描述：

  • picker-view-column 高度有问题，或者说需要设置多高？

更多关于uni-app nvue picker-view-column 高度有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

可以查看 hello-uniapp 中该组件是如何设置的

更多关于uni-app nvue picker-view-column 高度有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


demo里没有nvue示例吧

大哥你回复一下我的提问可以吗？？？？？？？？？？？？？？？

回复 codecat: 你需要给picker-view下的节点设置高度，picker-view文档中的示例是可以跑到nvue的

回复 DCloud_UNI_LXH: 我知道能跑，项目中正常页面的picker-view没有问题，只是nvue页面有问题，我就是要问一下，nvue中picker-view下的节点高度要设置为多少

回复 DCloud_UNI_LXH: 因为不管设置多少高度，文字都不是垂直居中的，滚动的时候，选项也落不到居中的位置

回复 codecat: 文档写明了：nvue页面子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中。

回复 DCloud_UNI_LXH: 找到问题了，开始是只给子节点设置了高度，所以高度无效，还需要在indicator-style设置相同的高度

回复 codecat: 所以我说嘛，让你好好看看示例，跟着设置就ok了。我只看问题描述也不好定位问题所在

在 nvue 页面中，picker-view-column 的高度问题通常与样式设置有关。nvue 使用原生渲染，其布局方式与 Vue 页面不同，需要特别注意样式属性。

原因分析：

  1. nvue 的 Flexbox 布局：nvue 默认使用 Flexbox 布局，且 display: flex 是默认值。如果父容器或 picker-view-column 未设置明确高度，可能导致高度异常。
  2. picker-view 的固定高度：picker-view 组件在 nvue 中需要显式设置高度，否则其内部列可能无法正常显示。
  3. 样式作用域：nvue 中部分 CSS 属性不支持（如百分比高度），需使用具体数值或 Flex 布局调整。

解决方案：

  1. 为 picker-view 设置固定高度：
    在 nvue 中，建议为 picker-view 设置明确的高度值（如 height: 400rpx），确保内部列能正常渲染。

    .option-pick {
    height: 400rpx;
}

  2. 检查父容器高度：
    确保 option-bd 等父容器有有效高度（如设置 flex: 1 或固定值），避免高度塌陷。

  3. 使用 flex-direction 调整布局：
    如果 picker-view-column 内选项未垂直排列，可尝试为列设置 flex-direction: column。

    .picker-view-column {
    flex-direction: column;
}

  4. 避免使用百分比高度：
    在 nvue 中，尽量使用 rpx 或 px 单位代替百分比，确保高度值被正确解析。

示例代码调整：

<view class="option-bd">
    <picker-view class="option-pick" v-if="showOption" :value="value" @change="bindChange">
        <picker-view-column class="picker-view-column">
            <text class="option-item" v-for="(item,index) in timeList">{{item}}</text>
        </picker-view-column>
    </picker-view>
</view>

.option-bd {
    flex: 1; /* 确保父容器有弹性高度 */
}
.option-pick {
    height: 400rpx; /* 固定picker-view高度 */
}
.picker-view-column {
    flex-direction: column; /* 确保选项垂直排列 */
}
回到顶部