微信小程式，是屬於小程式的一種，英文名為Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或搜一下即可開啟應用。微信小程式也是基於H5，JS的開發。

一. 清空輸入框資訊（重置輸入框資訊恢復預設值）

這是我在微信小程式實訓開發的過程中出現的問題，多次思考後終於解決了輸入框內已傳送的訊息無法被清空這個問題。從另一個角度說可以把清空輸入框資訊理解為重置輸入框資訊恢復初始預設值。以下是我的解決方案，希望對你們有所幫助。

首先，當用戶從輸入框輸入資訊後，就會點擊發送按鈕進行傳送資訊，然後表單對輸入框內傳送的訊息進行重置恢復初始預設值，方便使用者下一條訊息的編輯和傳送。

直接上程式碼如下：
WXML程式碼：

<form>
	<view class="form">
		<!--繫結資料-->
		<input class="input" auto-focus placeholder="請輸入內容" bindinput="bindInputData" />
		<!--傳送資訊並初始化值-->
		<button class="button" type="primary" form-type="reset" bindtap="sendMsg">傳送</button>
	</view>
</form>

form-type=“reset”，reset屬性的作用是重置，可把表單中的元素重置為它們的預設值。
type=“primary”，type屬性的作用是用於控制按鈕的顏色樣式。在微信小程式中，primary屬性預設為綠色。
注：form-type="reset"只能應用到form標籤當中，view標籤中無效，如果去掉form標籤，reset將失去作用。

JS程式碼：

//使用者資訊
 userInfo:{},inputvalue:''
 },//繫結資料
bindInputData:function(e){
 this.setData({
 inputvalue:e.detail.value
 });
},//傳送資料
sendMsg:function(){
 if(this.data.inputvalue == ''){
  wx.showToast({
  title: '訊息不能為空~~~',duration: 2000
  })
  return ;
 }
 },

關於showToast的詳細內容請見wx.showToast(Object object)，它的作用是顯示訊息提示框。

WXSS程式碼：

.form{/*輸入框整體*/
 width: 100vw;
 height: 16vw;
 border-top: 1px solid #aaa;
 background-color: #f1f1f1;
 position: fixed;/*固定定位*/
 bottom: 0;/*底端距離為0*/
 display: flex;
 align-items: center;
 z-index: 20;
}

.input{/*輸入框*/
 width: 285px;
 height: 36px;
 background-color: #fff;
 border-radius: 20px;
 margin-left: 1vw;
 padding: 0 10px;/*上下內邊距*/
 font-size: 28rpx;
 color: #444;
}

.button{/*傳送按鈕*/
 width: 70px !important;/*按鈕，提升權重*/
 height: 40px;
 padding: 8px 0;
 margin-right: 4px;
}

實現效果：

二. 實現螢幕自動往上滾動

我在做專案的過程中發現使用者傳送的訊息會被資訊輸入框遮擋，而且還需要手動滑動顯示螢幕才能看到使用者所發的訊息。所以想到以下方法解決這個問題。

實現顯示螢幕隨著訊息的傳送自動往上滾動，並且使輸入框不會遮擋住所有使用者傳送的訊息。
直接上程式碼如下：
JS程式碼：

// 將螢幕往上滾動，將螢幕底端的顯示內容顯示出來
  wx.pageScrollTo({
   scrollTop: 1000000000,duration: 300
  })

關於pageScrollTo的詳細內容請見wx.pageScrollTo(Object object)，它的作用將頁面滾動到目標位置，支援選擇器和滾動距離兩種方式定位。

如何解決資訊輸入框遮擋了顯示螢幕上的其他使用者對話資訊內容？
具體思路如下：
在之前的內容裡，資訊輸入框中js程式碼用position: fixed將資訊輸入框進行固定定位，bottom: 0將輸入框與底端的距離設定為0。所以我們可以在顯示螢幕底端又加入一個板塊，然後將這個板塊隱藏在資訊輸入框下（資訊輸入框將板塊覆蓋，不會影響美觀），在js程式碼裡新增板塊的高度，寫入與資訊輸入框一樣的高度，將顯示螢幕頂到資訊輸入框的上方，就不會出現資訊輸入框會遮擋顯示螢幕內容這個問題。

直接上程式碼如下：
WXML程式碼：

<view class="block">
	<text>隱藏塊</text>
</view>

WXSS程式碼：

.block{/*隱藏塊*/
 width: 100vw;
 height: 16vw;
 margin-top: 56vw;
 border-top: 1px solid #aaa;
 background-color: #f1f1f1;
}

——>以上內容分別是關於如何解決使用者點擊發送訊息後如何將資訊輸入框內的資料初始化，恢復預設值和如何將顯示螢幕隨著使用者訊息的傳送自動往上滾動，輸入框不會遮擋顯示螢幕上的其他使用者對話資訊內容這兩個問題。在第一個問題裡用form裡的reset屬性解決比較方便，也可以嘗試在js裡寫個function函式將資訊輸入框裡的資料進行初始化。第二個問題裡用pageScrollTo方法實現螢幕自動向上滾動和用板塊的辦法將顯示螢幕頂到資訊輸入框的上方。

總結

到此這篇關於微信小程式清空輸入框資訊與實現螢幕往上滾動的示例程式碼的文章就介紹到這了,更多相關微信小程式清空輸入框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！