微信小程序 — — 留言板的實現方式
主要功能點:
-
富文本的邊框可以自動匹配屏幕大小;
-
顯示富文本中輸入的字數;
-
獲取富文本中的內容,提交留言;
- 提交留言後的彈窗;
對應的.wxml內容
注意:
富文本是通過嵌套在表單內的方式,顯現出來。
<view data-id="liuyan">
<form bindsubmit="bindFormSubmit">
<textarea class="view-liuyan" minlength="4" maxlength="122" name="textarea" placeholder="請輸入留言內容" bindinput="bindInputText">
<text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text>
</textarea>
<button class="send" form-type="submit">提交留言</button>
</form>
</view>
對應的.wxss內容
注意:
要重寫textarea標籤選擇器,主要就是width屬性,否則本文框顯示不對。
.view-liuyan {
margin: 25rpx;
border-style: solid;
border-width: 2rpx;
border-color: #ccc;
}
textarea {
cursor: auto;
/* 主要就是重寫它 */
width: 700rpx;
height: 250rpx;
display: block;
position: relative;
}
/* 顯示輸入字符 */
.currentWordNumber {
position: absolute;
bottom: 40rpx;
right: 26rpx;
color: #888;
}
對應的.js內容
注意:
《實時顯示輸入字數》與《獲取富文本內容並提交》是分開寫的。
// 獲取富文本中的內容,並提交留言
bindFormSubmit: function(e) {
var that = this;
// 獲取輸入的內容
var value = e.detail.value.textarea;
if (value.length < 4) {
wx.showModal({
title: '提示',
content: '字數少於4個字',
})
} else {
// 提交留言
wx.request({
// 傳到自己的服務器上
url: 'xxx.com',
method: 'POST',
// 。。。。。。。
})
// 提交完成後的顯示
wx.showToast({
title: '感謝留言',
icon: 'success',
duration: 2000
})
}
},
// 實時顯示輸入字數
bindInputText: function(e) {
var that = this
var value = e.detail.value;
var len = parseInt(value.length);
if (len > that.data.noteMaxLen) return;
that.setData({
currentWordNumber: len
})
}
顯示效果:
更具體的效果顯示,可以去我的小程序看看效果哦,就在留言中。
感覺有用的小夥伴,點個贊再走撒~