小程序中的textarea一直是个坑，使用的是原生的textarea组件，其优先级，官方也没有给出明确的解决方案或者替代品，而且原生组件在开发时有一定的限制。具体可参考：

https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

我在小程序开发中，产品是在屏幕底栏有一个fix定位的操作栏，其中的一个功能便是点击其中的一个icon弹出一个投诉建议的多行输入框，有点像这个：

但是问题来了，那个textarea输入区域不仅是个透明的（弹框中的placeholder直接覆盖在了页面内容上面）而且在textarea上滑动的的时候可以滚动页面的内容，瞄了一眼文档直接使用了cover-view，想把cover-view当做一个在textarea面板下覆盖全屏的半透明flag，结果这个cover-view的优先级更高，直接把textareaget压住了。

cover-view bindtap="addAdvice" style="display: {{devicePanel ? 'block' : 'none'}}; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); left: 0; top: 0;"

想着让teatarea滑动的时候别滑动页面内容就好，就直接写了普通的view全屏modal层，让他置于textarea下即可试了一下可行。
关于placeholder可上下滑动直接在textarea中添加fixed属性即可。代码如下：
wxml：

view style="display: {{devicePanel ? 'block' : 'none'}}; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); left: 0; top: 0;"/viewview wx:if="{{devicePanel}}" class='{{devicePanel?"devicePanel":"devicePanelHidden"}}'    view class='deviceTitle'投诉建议/view    image class='deviceClose' catchtap='closeDevice' src="/pubic/img/ico/close.png"  mode='aspectFill'/image    textarea class='deviceInput' placeholder='请输入您的建议和想法，我们会在第一时间给您反馈。'  value='{{deviceValue}}' name='{{deviceValue}}' bindinput='getDeviceValue' adjust-position fixed/textarea    button type="" class="deviceSubmitBtn "  catchtap='submitDevice'匿名提交/button/view

js：

data:{devicePanel:false,   //投诉建议弹出层    deviceValue:'',       //店铺投诉建议内容},addAdvice:function(){    this.setData({      devicePanel:true    })  },  closeDevice:function(){    this.setData({      devicePanel: false,      deviceValue:""    })  },// 文本框输入失去焦点事件  getDeviceValue(e) {    this.setData({      deviceValue: e.detail.value    })  },  submitDevice:function(){    var _this = this;    console.info("submitDevice", _this.data.deviceValue)    if (!_this.data.deviceValue)    {      wx.showToast({        title: '请输入您要投诉的内容!',        icon: 'none',        duration: app.g.duration      })     return;    }    _this.setData({      devicePanel:false    })    wx.showLoading({      title: '提交中...',    })    const data = {      //参数列表    };    //封装的wx.request方法    app.requestwx(app.g.apiUrl + 'currenturl“', data, 'POST').then((res) = {      wx.hideLoading()      _this.setData({        deviceValue:""      })    }).catch((errMsg) = {      console.log(errMsg);      wx.hideLoading()    });  },

wxss：

.devicePanel{  position: fixed;  width: 100%;  height: 660rpx;  padding: 20rpx 34rpx;  bottom: 0;  background-color: #fff;  z-index: 999;  transition-timing-function: ease-in-out;  transition: 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);}.devicePanelHidden{  position: fixed;  width: 100%;  height: 660rpx;  padding: 20rpx 30rpx;  bottom: -660rpx;  background-color: #fff;  z-index: -999;  transition-timing-function: ease-in-out;  transition: 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);}.deviceTitle{  font-size: 18px;  color: #333333;  text-align: center;  font-weight: 500;}.deviceClose{  float: right;  width: 24rpx;  height: 24rpx;  padding: 12rpx;  margin-top: -48rpx;  margin-right: -24rpx;}.deviceInput{  width: 94%;  height: 360rpx;  margin: 24rpx 0;  padding: 20rpx;  border: 1px solid #D0D0D0;  border-radius: 2px;  /* z-index: 1000; */}.deviceSubmitBtn{  width: 100% !important;  margin-left:0;  margin-right: 0;  color: #fff;  background-color: #406BDB;  padding-left: -28px; }

就这些， All in here~~~   欢迎参考

版权归本人所有