微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕自動(dòng)往上滾動(dòng)的方法

不懂微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕自動(dòng)往上滾動(dòng)的方法？其實(shí)想解決這個(gè)問(wèn)題也不難，下面讓小編帶著大家一起學(xué)習(xí)怎么去解決，希望大家閱讀完這篇文章后大所收獲。

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

一. 清空輸入框信息（重置輸入框信息恢復(fù)默認(rèn)值）

這是我在微信小程序?qū)嵱?xùn)開(kāi)發(fā)的過(guò)程中出現(xiàn)的問(wèn)題，多次思考后終于解決了輸入框內(nèi)已發(fā)送的消息無(wú)法被清空這個(gè)問(wèn)題。從另一個(gè)角度說(shuō)可以把清空輸入框信息理解為重置輸入框信息恢復(fù)初始默認(rèn)值。以下是我的解決方案，希望對(duì)你們有所幫助。

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

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

<form>
	<view class="form">
		<!--綁定數(shù)據(jù)-->
		<input class="input" auto-focus placeholder="請(qǐng)輸入內(nèi)容" bindinput="bindInputData" />
		<!--發(fā)送信息并初始化值-->
		<button class="button" type="primary" form-type="reset" bindtap="sendMsg">發(fā)送</button>
	</view>
</form>

form-type=“reset”，reset屬性的作用是重置，可把表單中的元素重置為它們的默認(rèn)值。
type=“primary”，type屬性的作用是用于控制按鈕的顏色樣式。在微信小程序中，primary屬性默認(rèn)為綠色。
注：form-type="reset"只能應(yīng)用到form標(biāo)簽當(dāng)中，view標(biāo)簽中無(wú)效，如果去掉form標(biāo)簽，reset將失去作用。

JS代碼：

//用戶信息
 userInfo:{},
 inputvalue:''
 },
 //綁定數(shù)據(jù)
bindInputData:function(e){
 this.setData({
 inputvalue:e.detail.value
 });
},
 //發(fā)送數(shù)據(jù)
sendMsg:function(){
 if(this.data.inputvalue == ''){
  wx.showToast({
  title: '消息不能為空~~~',
  duration: 2000
  })
  return ;
 }
 },

關(guān)于showToast的詳細(xì)內(nèi)容請(qǐng)見(jiàn)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;/*上下內(nèi)邊距*/
 font-size: 28rpx;
 color: #444;
}

.button{/*發(fā)送按鈕*/
 width: 70px !important;/*按鈕，提升權(quán)重*/
 height: 40px;
 padding: 8px 0;
 margin-right: 4px;
}

實(shí)現(xiàn)效果：

二. 實(shí)現(xiàn)屏幕自動(dòng)往上滾動(dòng)

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

實(shí)現(xiàn)顯示屏幕隨著消息的發(fā)送自動(dòng)往上滾動(dòng)，并且使輸入框不會(huì)遮擋住所有用戶發(fā)送的消息。
直接上代碼如下：
JS代碼：

// 將屏幕往上滾動(dòng)，將屏幕底端的顯示內(nèi)容顯示出來(lái)
  wx.pageScrollTo({
   scrollTop: 1000000000,
   duration: 300
  })

關(guān)于pageScrollTo的詳細(xì)內(nèi)容請(qǐng)見(jiàn)wx.pageScrollTo(Object object)，它的作用將頁(yè)面滾動(dòng)到目標(biāo)位置，支持選擇器和滾動(dòng)距離兩種方式定位。

如何解決信息輸入框遮擋了顯示屏幕上的其他用戶對(duì)話信息內(nèi)容？
具體思路如下：
在之前的內(nèi)容里，信息輸入框中js代碼用position: fixed將信息輸入框進(jìn)行固定定位，bottom: 0將輸入框與底端的距離設(shè)置為0。所以我們可以在顯示屏幕底端又加入一個(gè)板塊，然后將這個(gè)板塊隱藏在信息輸入框下（信息輸入框?qū)鍓K覆蓋，不會(huì)影響美觀），在js代碼里添加板塊的高度，寫(xiě)入與信息輸入框一樣的高度，將顯示屏幕頂?shù)叫畔⑤斎肟虻纳戏?，就不?huì)出現(xiàn)信息輸入框會(huì)遮擋顯示屏幕內(nèi)容這個(gè)問(wèn)題。

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

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

WXSS代碼：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕自動(dòng)往上滾動(dòng)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!