uni-app uni-data-picker 在安卓真机上显示有问题

uni-app uni-data-picker 在安卓真机上显示有问题

# 产品分类
uniapp/App

| 开发环境 | 版本号   | 项目创建方式 |
|----------|----------|--------------|
| Mac      | 10.15.7  | HBuilderX    |
| 手机系统  | 手机系统版本号 | 手机机型  |
| Android  | Android 11 | iQOO       |
| 页面类型  |          | vue         |

## 示例代码：

```html
<view class="ui-list">  
    <text>所属行政区</text>  
    <uni-data-picker v-model="form.city" :localdata="items" placeholder="请选择地区" class="r-picker">  
    </uni-data-picker>  
</view>

操作步骤：

在手机上看会显示异常，chrome浏览器上显示是正常的

预期结果：

预期与chrome上一致

实际结果：

选择完后回显样式错乱

示例图片


更多关于uni-app uni-data-picker 在安卓真机上显示有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

源代码都在那，自己改

更多关于uni-app uni-data-picker 在安卓真机上显示有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


额…这是官方出的插件，有问题当然可以报出来，帮助这个插件做的越来越好不是吗。如果都自己拿着源代码改，那开发出来的插件作者只管发布就好了，都不用维护了。

uni-data-picker 在安卓真机上显示异常通常与样式兼容性或组件内部渲染机制有关。从你提供的图片来看，选择后回显内容可能出现了布局错乱或文本溢出。

可能原因及解决方案：

  1. 样式兼容性问题
    • 安卓真机对 flex 布局或 text-overflow 的支持可能与浏览器不同，建议检查组件外层或内置元素的 CSS 样式，尝试添加以下代码：
      .r-picker {
  /* 确保布局稳定 */
  display: block;
  overflow: hidden;
}
.uni-data-picker__input {
  /* 强制文本截断 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
回到顶部