微信小程序实现留言板功能_javascript技巧

const app = 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){ var that = this that.setData({  message:e.detail.value }) },  click:function(e){ var that = this; let id = e.currentTarget.dataset.id; let index = e.currentTarget.dataset.index; var value = []; value = this.data.message_id; var array_i = this.in_array(id, value); var chekeds = that.data.msgData; var msg = chekeds[index].msg; var message = 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 (var i in array) {  if (array[i] == search) {  return i;  } } return false; }, submit:function(){ var value = []; var message = this.data.message; var msgData = this.data.msgData; if (message == '' && !value.length) {  wx.showToast({  title: '暂无选择项目',  icon:'none'  })  return; } app.globalData.message = message; for (var i = 0; i < msgData.length; i++) {  if(message.indexOf(msgData[i].msg) > -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) {    var page = getCurrentPages().pop();    if (page == undefined || page == null) return;    page.onLoad();   }   })   app.globalData.message = message;  }    console.log(res)  } }) },  /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = 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){   var message_id = res.data.message_id;   var value = that.data.msgData;   var message = res.data.message;   that.setData({   message: message   });   for (var i = 0; i < value.length;i++) {   if (that.in_array(value[i].child_id, message_id)) {    value[i].checked = true;    that.setData({    msgData: value,    });   }   }  }  } })  },  /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {  },  /** * 生命周期函数--监听页面显示 */ onShow: function () {  },  /** * 生命周期函数--监听页面隐藏 */ onHide: function () {  },  /** * 生命周期函数--监听页面卸载 */ onUnload: function () {   },  /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {  },  /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {  },  /** * 用户点击右上角分享 */ onShareAppMessage: function () {  }})

<!--pages/order/message/message.wxml--><view class='message_nav'> <form bindsubmit='FormSubmit'> <view class='section'> <textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='80' style="word- wrap:break-word" bindinput='bindTextAreaChange' value="{{message}}"></textarea></view> <view class='fast'>快速捎话：</view> <checkbox-group class="checkboxChange"> <view wx:for="{{msgData}}" wx:key="{{index}}" data-index="{{index}}" data-id="{{item.child_id}}" data-checked='{{item.checked}}' bindtap='click' > <checkbox value='{{item.msg}}' class='item' checked='{{item.checked}}' >{{item.msg}}</checkbox> </view></checkbox-group><button class='submit' bindtap='submit'>捎话</button></form></view>

/* 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: 1rpx solid #ccc; display:inline-block; margin:28rpx 45rpx auto 50rpx; }.fast{ position:relative; top:-50rpx; font-size:90%; background:#f4f4f4; line-height:100rpx; text-indent:2em;}.item{position:relative;border-bottom:1px solid #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:1px solid #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%;} */