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

一. 清空輸入框信息（重置輸入框信息恢復默認值）

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

首先，當用戶從輸入框輸入信息后，就會點擊發(fā)送按鈕進行發(fā)送信息，然后表單對輸入框內發(fā)送的消息進行重置恢復初始默認值，方便用戶下一條消息的編輯和發(fā)送。
具體思路如下：

直接上代碼如下：
WXML代碼：

<form>
	<view class="form">
		<!--綁定數據-->
		<input class="input" auto-focus placeholder="請輸入內容" bindinput="bindInputData" />
		<!--發(fā)送信息并初始化值-->
		<button class="button" type="primary" form-type="reset" bindtap="sendMsg">發(fā)送</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
 });
},
 //發(fā)送數據
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{/*發(fā)送按鈕*/
 width: 70px !important;/*按鈕，提升權重*/
 height: 40px;
 padding: 8px 0;
 margin-right: 4px;
}

實現效果：

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

我在做項目的過程中發(fā)現用戶發(fā)送的消息會被信息輸入框遮擋，而且還需要手動滑動顯示屏幕才能看到用戶所發(fā)的消息。所以想到以下方法解決這個問題。

實現顯示屏幕隨著消息的發(fā)送自動往上滾動，并且使輸入框不會遮擋住所有用戶發(fā)送的消息。
直接上代碼如下：
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;
}

——>以上內容分別是關于如何解決用戶點擊發(fā)送消息后如何將信息輸入框內的數據初始化，恢復默認值和如何將顯示屏幕隨著用戶消息的發(fā)送自動往上滾動，輸入框不會遮擋顯示屏幕上的其他用戶對話信息內容這兩個問題。在第一個問題里用form里的reset屬性解決比較方便，也可以嘗試在js里寫個function函數將信息輸入框里的數據進行初始化。第二個問題里用pageScrollTo方法實現屏幕自動向上滾動和用板塊的辦法將顯示屏幕頂到信息輸入框的上方。

總結

到此這篇關于微信小程序清空輸入框信息與實現屏幕往上滾動的示例代碼的文章就介紹到這了,更多相關微信小程序清空輸入框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論