uni-app 3.2.9版本 nvue下iOS平台 textarea 组件 line-height 设置无效 且存在默认 padding

uni-app 3.2.9版本 nvue下iOS平台 textarea 组件 line-height 设置无效 且存在默认 padding

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.6 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

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

HBuilderX类型:正式

HBuilderX版本号:3.2.9

手机系统:iOS

手机系统版本号:IOS 14

手机厂商:模拟器

手机机型:iPhone 12

页面类型:vue

打包方式:云端

示例代码:

<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会抖动


更多关于uni-app 3.2.9版本 nvue下iOS平台 textarea 组件 line-height 设置无效 且存在默认 padding的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

补充一下

更多关于uni-app 3.2.9版本 nvue下iOS平台 textarea 组件 line-height 设置无效 且存在默认 padding的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

3.2.10 左右的padding 还是存在

回复 青阳_1900: … 左右的给漏了,下个版本修复

21年就提的bug,现在都还没修复

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

目前看正常了

回到顶部