關於小程序中textarea 中placeholder滾動和穿透填坑

小程序中的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;"></view>

<view 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~~~ 歡迎參考

版權歸本人所有