像素方舟_青阳
像素方舟_青阳
  • 发布:2021-09-29 15:38
  • 更新:2021-10-22 18:05
  • 阅读:407

【报Bug】3.2.9 nvue下iOS中 textarea 组件 line-height 设置无效,且存在默认 padding

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Big Sur 11.6

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 模拟器

手机机型: iPhone 12

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="page">  
    <view>  
      <text class="title">nvue下ios内行高设置失效</text>  
      <textarea  
        class="textarea"  
        :class="{ 'disable-default-padding': ios }"  
        :placeholder="place"  
        :placeholder-style="style"  
        :adjust-position="false"  
      ></textarea>  
      <text class="title">nvue下ios内存在默认padding</text>  
      <textarea class="textarea" :placeholder="place" :placeholder-style="style" :adjust-position="false"></textarea>  
      <text class="title">text组件预期表现正常</text>  
      <text class="textarea" :style="style">{{ place }}</text>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    const sys = uni.getSystemInfoSync()  
    return {  
      place: '来分享点什么吧~记得打上具体的作品名称哦。PS:如果编辑内容过长,请先在手机备忘录等工具编辑好后,再复制发布~',  
      style: 'color:#ccc;line-height:44rpx;',  
      ios: sys.platform === 'ios'  
    }  
  }  
}  
</script>  

<style lang="scss" scoped>  
.page {  
  flex: 1;  
  width: 750rpx;  
  padding: 32rpx;  
  background: #f6f8f9;  
}  

.title {  
  margin-bottom: 24rpx;  
  font-size: 28rpx;  
  line-height: 44rpx;  
  color: #333;  
}  

.textarea {  
  height: 3 * 44rpx; // 3行应该刚好触底  
  margin-bottom: 32rpx;  
  font-size: 28rpx;  
  line-height: 44rpx;  
  color: #333;  
  background: white;  

  // 是否去掉 iOS 下的默认内边距 https://uniapp.dcloud.io/component/textarea  
  &.disable-default-padding {  
    padding: 2rpx -10rpx;  
  }  
}  
</style>  

操作步骤:

运行到ios模拟器即可

预期结果:

textarea 显示padding正常或可配置,行高设置正常

实际结果:

textarea 显示异常

bug描述:

nvue下ios中,textarea问题如下:

  1. 存在默认padding,麻烦要么去掉,要么和小程序一样可配置
  2. placeholder 设置行高无效
  3. 首次聚焦的时候,placeholder会抖动
2021-09-29 15:38 负责人:DCloud_iOS_XHY 分享
已邀请:
像素方舟_青阳

像素方舟_青阳 (作者)

补充一下

像素方舟_青阳

像素方舟_青阳 (作者)

麻烦官方看下,padding的问题,目前还能hack解决,行高是真的影响设计体验

DCloud_iOS_XHY

DCloud_iOS_XHY

你好感谢反馈,默认存在 padding 的问题下个版本会修复,lineHeight 的问题iOS和Android端都不支持,暂时无法解决,可以使用 vue 页面实现

DCloud_iOS_XHY

DCloud_iOS_XHY

左右padding 的问题,使用 HX3.2.11测试一下是否正常

要回复问题请先登录注册