快捷導(dǎo)航

支付寶小程序?qū)崿F(xiàn)類(lèi)似微信多行輸入功能(思路詳解)

更新時(shí)間：2024年02月22日 09:28:23 作者：拙慕JULY

這篇文章主要介紹了支付寶小程序?qū)崿F(xiàn)類(lèi)似微信多行輸入功能,輸入超過(guò) 8 行的時(shí)候會(huì)出現(xiàn)滾動(dòng),這樣做的好處就是輸入框不會(huì)直接頂?shù)巾?yè)面最頂部,支付寶小程序?qū)崿F(xiàn)多行輸入框：使用textarea多行輸入框?qū)崿F(xiàn),感興趣的朋友一起看看吧

思路一：

textarea 標(biāo)簽設(shè)置max-height, 標(biāo)簽自帶屬性auto-height自動(dòng)增高

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
  </view>
</view>
// css 
.textarea {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

實(shí)際效果最大高度未生效, 會(huì)一直增高，該方法不行

思路二

多行文本框套一個(gè)容器，容器設(shè)置最大高度并y軸滾動(dòng)，

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}">
      </textarea>
    </view>
  </view>
</view>
// css
.textarea-content {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

可以實(shí)現(xiàn)，但是ios會(huì)出現(xiàn)如下問(wèn)題，超出的文本全選中會(huì)在頁(yè)面透漏出光標(biāo)，光標(biāo)在滾動(dòng)層里也會(huì)透出

思路三

多行文本框設(shè)置絕對(duì)定位高度設(shè)置100%，增加一個(gè)兄弟元素設(shè)置max-height，監(jiān)聽(tīng)輸入事件記錄輸入的value, 把value放到兄弟元素里，由兄弟元素?fù)伍_(kāi)父元素，隨之文本框也自動(dòng)增高和減少

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput"  maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <text class="textarea-brother">{{value}}</text>
    </view>
  </view>
</view>
// css
.textarea-content {
  position: relative;
}
.textarea {
  height: 100%;
  position: absolute;
  top: -150rpx;
  height: 100%;
  width: 100%;
}
.textarea-brother {
  width: 100%;
  min-height: 42px;
  display: block;
  max-height: 150rpx;
  word-break: break-all;
  word-wrap: break-word;
}

解決了光標(biāo)超出滾動(dòng)層的問(wèn)題，但是input只能監(jiān)聽(tīng)輸入到輸入框的字，輸入法切換到中文，會(huì)先用拼音占輸入框的高度，期望高度也是可以增高的，但是由于監(jiān)聽(tīng)不到輸入事件，這種處理方法會(huì)遮蓋拼音

最終解

找到了支付寶原生組件的樣式表https://open.alipay.com/portal/forum/post/120501011

通過(guò)命名可以猜測(cè)這個(gè)是文本輸入框內(nèi)容樣式class屬性值，通過(guò)修改樣式設(shè)置 max-height, 自動(dòng)增高開(kāi)啟就完美實(shí)現(xiàn)多行輸入到一定高度不再增高，進(jìn)行滾動(dòng)

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput" maxlength="{{-1}}" auto-height  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <!-- <text class="textarea-brother">{{value}}</text> -->
    </view>
  </view>
</view>
// css
.textarea {
  .a-textarea-content {
    max-height: 150rpx !important;
  }
}

效果如下：