2***@qq.com
2***@qq.com
  • 发布:2026-03-02 10:14
  • 更新:2026-03-05 17:41
  • 阅读:202

picker-view不居中显示

分类:uni-app

产品分类: 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>

操作步骤:

如图不居中

预期结果:

居中

实际结果:

如图不居中

bug描述:

项目使用官方提供的picker-view 但是选项多了以后item不居中,

2026-03-02 10:14 负责人:DCloud_UNI_OttoJi 分享
已邀请:
Ask小助手

Ask小助手

当前知识库内容不足以支撑回答。需要补充安卓平台集成uts插件的具体步骤。请提供详细的错误信息和示例代码。
欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

作为 DCloud 官方人员,我对该 bug 反馈进行如下评审:


✅ 一、反馈完整性评估

项目 评估结果 说明
BUG 标题 ✅ 明确 “picker-view不居中显示” 简洁清晰
BUG 描述 ⚠️ 不够详细 仅描述“选项多了以后item不居中”,未说明具体表现(如上下偏移、对齐异常、是否滚动后错位等)
代码示例 ⚠️ 不完整 提供了模板结构,但缺少 tempListunitcurrentIndex 的定义,无法直接运行
复现步骤 ❌ 缺失 仅写“如图不居中”,无图无步骤,无法复现
预期结果 ✅ 明确 “居中”
实际结果 ❌ 缺失 同样为“如图不居中”,无图无描述
分类信息 ✅ 完整 提供了平台、版本、设备等信息

⚠️ 二、需要用户补充的内容

  1. 补充复现步骤

    • 提供 tempList 的具体数据(如长度、内容格式)
    • 说明“不居中”的具体表现:是文字偏上、偏下,还是滚动后错位?
    • 提供截图或录屏(如无法上传,请描述清楚)
  2. 补充完整代码

    • 提供 <script> 部分,包括 tempListunitcurrentIndex 的定义
    • 提供 <style> 部分,确认是否有自定义样式影响布局
  3. 确认是否使用 nvue

    • 如果是 nvue 页面,需特别注意 picker-view-column 的子节点需手动设置高度并居中(见知识库说明)

✅ 三、是否为已知问题或误报

根据知识库内容:

  • picker-view 在 App 平台(Android)是支持的,且官方示例中明确指出:

    “nvue页面子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中。”

    因此,如果用户使用的是 nvue 页面,这可能是预期行为,而非 bug。

  • Vue2 + Android 13 + HBuilderX 4.87 的组合在知识库中未发现已知居中异常记录。


✅ 四、初步建议(基于知识库)

请用户先确认以下两点:

  1. 是否使用了 nvue 页面?

    • 如果是,请为 .picker-item 设置固定高度并使用 text-align: center; line-height: 40rpx; 手动居中。
    • 示例:
      .picker-item {  
      height: 40rpx;  
      line-height: 40rpx;  
      text-align: center;  
      }  
  2. 是否使用了 vue 页面?

    • 请补充完整代码和复现步骤,我们将进一步验证是否为框架 bug。

✅ 五、结论

该反馈目前信息不完整无法直接认定为 bug。建议用户补充复现步骤和完整代码后重新提交。若确认是 nvue 页面,建议先按上述方式手动居中处理。

如需进一步协助,请补充以下内容:

  • 是否为 nvue 页面?
  • tempList 的长度和内容?
  • 不居中的具体表现(截图或描述)?
  • 是否使用了自定义样式?

我们将根据补充内容继续跟进。

内容为 AI 生成,仅供参考
2***@qq.com

2***@qq.com (作者)

完整代码 :

<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   

            v-for="(temp, index) in tempList"   
            :key="temp" :class="{ 'picker-item':true, '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明显偏上显示

[已删除]

[已删除]

这个问题出现在极小的数字内容,有小数长度。是 bug,下个 alpha会进行修复。

要回复问题请先登录注册