微信小程序实现留言板功能
本文实例为大家分享了微信小程序实现留言板功能，可以手写，可以删除，可以快速留言，供大家参考，具体内容如下
constapp=getApp();
Page({
/**
*页面的初始数据
*/
data:{
msgData:
[
{
child_id:1,
msg:
"泡澡水不要太热。",
checked:''
},//双引号
{
child_id:2,
msg:
"面部比较干，想补个水。",
checked:''
},
{
child_id:3,
msg:
"我只有2小时，您看着安排吧。",
checked:''
},
{
child_id:4,
msg:
"我想把眉毛在修下。",
checked:''
},
{
child_id:5,
msg:
"给我清个痘痘。",
checked:''
},
{
child_id:6,
msg:
"头疼，能轻点按。",
checked:''
}
],
message:'',
message_id:[],
},
bindTextAreaChange:function(e){
varthat=this
that.setData({
message:e.detail.value
})
},
click:function(e){
varthat=this;
letid=e.currentTarget.dataset.id;
letindex=e.currentTarget.dataset.index;
varvalue=[];
value=this.data.message_id;
vararray_i=this.in_array(id,value);
varchekeds=that.data.msgData;
varmsg=chekeds[index].msg;
varmessage=that.data.message;
if(!e.currentTarget.dataset.checked){
chekeds[index].checked=true
that.setData({
message:message+msg
})
}else{
chekeds[index].checked=false
that.setData({
message:message.replace(msg,'')
})
}
that.setData({
msgData:chekeds
})
if(array_i){
value.splice(array_i,1);
}else{
value.push(id);
}
this.setData({
message_id:value,
})
},
in_array:function(search,array){
for(variinarray){
if(array[i]==search){
returni;
}
}
returnfalse;
},
submit:function(){
varvalue=[];
varmessage=this.data.message;
varmsgData=this.data.msgData;
if(message==''&&!value.length){
wx.showToast({
title:'暂无选择项目',
icon:'none'
})
return;
}
app.globalData.message=message;
for(vari=0;i-1){
value[i]=msgData[i].child_id;
}
}
wx.request({
url:'https://www.njnrkj.com/app/public/index.php/index/index/server',
method:'POST',
data:{message_id:value,openId:app.globalData.openId,message:message},
header:{
'Accept':'application/json'
},
success:function(res){
if(res){
//wx.showToast({
//title:'捎话成功',
//success:function(){
//}
//})
wx.switchTab({
url:'/pages/order/order',
success:function(e){
varpage=getCurrentPages().pop();
if(page==undefined||page==null)return;
page.onLoad();
}
})
app.globalData.message=message;
}
console.log(res)
}
})
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varthat=this;
wx.request({
url:'https://www.njnrkj.com/app/public/index.php/index/index/serversle',
method:'POST',
data:{openId:app.globalData.openId},
header:{
'Accept':'application/json'
},
success:function(res){
if(res.data){
varmessage_id=res.data.message_id;
varvalue=that.data.msgData;
varmessage=res.data.message;
that.setData({
message:message
});
for(vari=0;i
xml:
快速捎话：
{{item.msg}}
捎话
CSS:
/*pages/order/message/message.wxss*/
/*捎话*/
.message_nav{
position:fixed;
width:100%;
}
.section{
width:96%;
height:220rpx;
margin-left:5px;
}
.message1{
width:96%;
height:210rpx;
margin-top:30rpx;
font-size:68%;
margin-left:20px;
}
.circle{
height:35rpx;
width:35rpx;
border-radius:50%;
border:1rpxsolid#ccc;
display:inline-block;
margin:28rpx45rpxauto50rpx;
}
.fast{
position:relative;
top:-50rpx;
font-size:90%;
background:#f4f4f4;
line-height:100rpx;
text-indent:2em;
}
.item{
position:relative;
border-bottom:1pxsolid#f4f4f4;
padding-bottom:10px;
top:-60rpx;
}
.item:hover{
background:pink;
color:#f4f4f4;
}
.message_font{
font-size:80%;
font-family:"微软雅黑";
font-weight:blod;
display:inline-block;
position:relative;
top:-5rpx;
}
.submit{
outline:none;
border:none;
list-style:none;
width:100%;
height:100rpx;
background:#fed1d6;
position:relative;
top:160rpx;
line-height:100rpx;
-webkit-border-radius:1rpx;
-moz-border-radius:1rpx;
border-radius:1rpx;
-webkit-appearance:none;
}
button::after{
border:none;
}
.item{
position:relative;
border-bottom:1pxsolid#f4f4f4;
padding-top:5px;
top:-60rpx;
width:100%;
padding-left:45rpx;
}
.checkboxChange{
position:relative;
top:15rpx;
font-size:68%;
border-radius:50%;
}
/*.circle{
border-radius:50%;
}*/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。