复制代码<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>
![青阳_1900](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/57/34/18_avatar_mid.jpg?v=1635820540)
- 发布:2021-08-10 11:34
- 更新:2021-10-09 11:14
- 阅读:1209
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS Big Sur 11.2.3
HBuilderX类型: 正式
HBuilderX版本号: 3.1.22
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: MI 8
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
在安卓机器上运行查看
在安卓机器上运行查看
预期结果:
显示不错位,能正常选择
显示不错位,能正常选择
实际结果:
显示错位,不能正常选择
显示错位,不能正常选择
bug描述:
nvue下 安卓 picker-view 当picker-view-column 大于3个时,显示错位。导致某些选项无法选择
3.2.6 测试问题还是存在,且ios和安卓都有问题
青阳_1900 (作者)
老哥,我本地测试看下了,现在苹果和安卓都有问题了,3.2.5-alpha
2021-09-16 17:06
阿里嘎多2077
HBuilder X 3.2.9 依然出现此问题,picker-view-column 里面节点多了,在 nvue 页面也会错乱 。
2021-10-09 11:12
青阳_1900 (作者)
之前我在 alpha 3.2.5 测试了一下显示测试正常了,但是用最新正式版 3.2.9,问题又回来了,而且是iOS也有这个问题了
2021-10-09 17:18