2***@qq.com
- 发布：2026-03-02 10:14
- 更新：2026-03-02 10:20
- 阅读：17
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 4.87
手机系统： Android
手机系统版本号： Android 13
手机厂商： 华为
手机机型： 80GT
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
<template>
<div class="custom-temp-picker">
<div class="picker-container">
<picker-view
class="temp-picker"
value="[currentIndex]"
@change="onPickerChange"
indicator-style="height: 40rpx;"
>
<picker-view-column>
<view
class="picker-item"
v-for="(temp, index) in tempList"
key="temp"
class="{ 'selected': currentIndex === index }"
>
{{ temp }}{{ unit }}
</view>
</picker-view-column>
</picker-view>
</div>
</div>
</template>
indicator-style="height: 40rpx;"
>
<picker-view-column>
<view
class="picker-item"
v-for="(temp, index) in tempList" key="temp" class="{ 'selected': currentIndex === index }" >
{{ temp }}{{ unit }}
</view>
</picker-view-column>
</picker-view>
</div>
</div>
</template>
操作步骤：
如图不居中
如图不居中
预期结果：
居中
居中
实际结果：
如图不居中
如图不居中
bug描述：
项目使用官方提供的picker-view 但是选项多了以后item不居中，
当前知识库内容不足以支撑回答。需要补充安卓平台集成uts插件的具体步骤。请提供详细的错误信息和示例代码。
欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。
作为 DCloud 官方人员，我对该 bug 反馈进行如下评审：
✅ 一、反馈完整性评估
| 项目 | 评估结果 | 说明 |
|---|---|---|
| BUG 标题 | ✅ 明确 | “picker-view不居中显示” 简洁清晰 |
| BUG 描述 | ⚠️ 不够详细 | 仅描述“选项多了以后item不居中”，未说明具体表现（如上下偏移、对齐异常、是否滚动后错位等） |
| 代码示例 | ⚠️ 不完整 | 提供了模板结构，但缺少 tempList、unit、currentIndex 的定义，无法直接运行 |
| 复现步骤 | ❌ 缺失 | 仅写“如图不居中”，无图无步骤，无法复现 |
| 预期结果 | ✅ 明确 | “居中” |
| 实际结果 | ❌ 缺失 | 同样为“如图不居中”，无图无描述 |
| 分类信息 | ✅ 完整 | 提供了平台、版本、设备等信息 |
⚠️ 二、需要用户补充的内容
-
补充复现步骤：
- 提供
tempList的具体数据（如长度、内容格式） - 说明“不居中”的具体表现：是文字偏上、偏下，还是滚动后错位？
- 提供截图或录屏（如无法上传，请描述清楚）
- 提供
-
补充完整代码：
- 提供
<script>部分，包括tempList、unit、currentIndex的定义 - 提供
<style>部分，确认是否有自定义样式影响布局
- 提供
-
确认是否使用 nvue：
- 如果是 nvue 页面，需特别注意
picker-view-column的子节点需手动设置高度并居中（见知识库说明）
- 如果是 nvue 页面，需特别注意
✅ 三、是否为已知问题或误报
根据知识库内容：
-
picker-view 在 App 平台（Android）是支持的，且官方示例中明确指出：
“nvue页面子节点未继承 picker-view 的选中框的高度，需要自己设置高度并居中。”
因此，如果用户使用的是 nvue 页面，这可能是预期行为，而非 bug。
-
Vue2 + Android 13 + HBuilderX 4.87 的组合在知识库中未发现已知居中异常记录。
✅ 四、初步建议（基于知识库）
请用户先确认以下两点：
-
是否使用了 nvue 页面？
- 如果是，请为
.picker-item设置固定高度并使用text-align: center; line-height: 40rpx;手动居中。 - 示例：
.picker-item { height: 40rpx; line-height: 40rpx; text-align: center; }
- 如果是，请为
-
是否使用了 vue 页面？
- 请补充完整代码和复现步骤，我们将进一步验证是否为框架 bug。
✅ 五、结论
该反馈目前信息不完整，无法直接认定为 bug。建议用户补充复现步骤和完整代码后重新提交。若确认是 nvue 页面，建议先按上述方式手动居中处理。
如需进一步协助，请补充以下内容：
- 是否为 nvue 页面？
- tempList 的长度和内容？
- 不居中的具体表现（截图或描述）？
- 是否使用了自定义样式？
我们将根据补充内容继续跟进。
内容为 AI 生成，仅供参考
2***@qq.com (作者)
indicator-style="height: 40rpx;"
>
<picker-view-column>
<view
class="picker-item"
v-for="(temp, index) in tempList" key="temp" class="{ 'selected': currentIndex === index }" >
{{ temp }}{{ unit }}
</view>
</picker-view-column>
</picker-view>
</div>
</div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
const props = defineProps({
modelValue: {
type: Number,
default: 0
},
tempRange: {
type: [Object, Array],
default: () => ({ start: 0, end: 160, step: 1 })
},
unit: {
type: String,
default: '°C'
}
})
const emit = defineEmits(['update:modelValue', 'change'])
const tempList = ref([])
const currentIndex = ref(0)
const generateRange = (rangeConfig) => {
if (Array.isArray(rangeConfig)) {
return rangeConfig
}
const { start = 0, end = 160, step = 1 } = rangeConfig
const list = []
for (let i = start; i <= end; i += step) {
list.push(i)
}
return list
}
const initTempOptions = () => {
tempList.value = generateRange(props.tempRange)
}
const setPickerFromValue = (value) => {
if (!value && value !== 0) value = 0
const index = tempList.value.indexOf(value)
currentIndex.value = index >= 0 ? index : 0
}
const onPickerChange = (e) => {
const value = e.detail.value[0]
currentIndex.value = value
const temp = tempList.value[value] || 0
emit('update:modelValue', temp)
emit('change', temp)
}
watch(() => props.modelValue, (newVal) => {
if (tempList.value.length > 0) {
const index = tempList.value.indexOf(newVal)
if (index >= 0 && index !== currentIndex.value) {
currentIndex.value = index
}
}
}, { immediate: true })
watch(() => props.tempRange, () => {
initTempOptions()
setPickerFromValue(props.modelValue)
}, { deep: true })
onMounted(() => {
initTempOptions()
setPickerFromValue(props.modelValue)
})
</script>
<style scoped>
.custom-temp-picker {
width: 100%;
height: 120rpx;
display: flex;
align-items: center;
}
.picker-container {
width: 200rpx;
height: 120rpx;
overflow: hidden;
background-color: #fff;
position: relative;
}
.temp-picker {
width: 100%;
height: 100%;
}
.picker-item {
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 18rpx;
color: #333;
transition: all 0.2s ease;
}
.picker-item.selected {
color: #FF9620 !important;
font-size: 20rpx;
font-weight: 500;
}
</style> ；滚动10多个item后item明显偏上显示
