记一次 uni-app开发微信小程序 textarea 的“伪遮挡”踩坑实录

文章目录

• [1. 问题描述](#1. 问题描述)
• [2. 出现原因](#2. 出现原因)
• [3. 解决办法](#3. 解决办法)
• • [3.1. 给下单按钮添加z-index](#3.1. 给下单按钮添加z-index)
  • [3.2. 调整textarea的z-index](#3.2. 调整textarea的z-index)
• [4. 问题解决](#4. 问题解决)

1. 问题描述

在订单页面中，我使用了 textarea 作为备注输入框，底部有一个固定定位的"下单"按钮。当页面滚动时，textarea 会与按钮重叠。

2. 出现原因

经过查阅 uni-app 官方文档和社区讨论，我发现这个问题的根本原因是：小程序的 textarea、audio等组件默认层级极高，会覆盖其他元素。

3. 解决办法

3.1. 给下单按钮添加z-index

&__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 32rpx;
  box-sizing: border-box;
  background: #f5f7f9;
  z-index: 999;
}

3.2. 调整textarea的z-index

.remark-input {
  width: 100%;
  height: 180rpx;
  font-family: PingFang SC;
  font-size: 32rpx;
  font-weight: normal;
  line-height: 48rpx;
  letter-spacing: normal;
  color: #242b3b;
  position: relative;
  z-index: 0;
}

注意 position: relative;不可少

4. 问题解决