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


Posted in Javascript onNovember 02, 2018

本文实例为大家分享了微信小程序实现留言板功能,可以手写,可以删除,可以快速留言,供大家参考,具体内容如下

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 () {
 
 }
})

xml:

<!--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>

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: 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%;
} */

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
javascript中floor使用方法总结
Feb 02 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
微信小程序实现登录遮罩效果
Nov 01 #Javascript
在vue里使用codemirror遇到的问题
Nov 01 #Javascript
vue中使用codemirror的实例详解
Nov 01 #Javascript
vue-lazyload使用总结(推荐)
Nov 01 #Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 #Javascript
You might like
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
为什么要有struct关键字
2012/05/08 面试题
如何实现一个自定义类的序列化
2012/05/22 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
办加油卡单位介绍信
2014/01/09 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
四查四看剖析材料
2014/02/14 职场文书
网站客服岗位职责
2014/04/05 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
上课说话检讨书500字
2014/11/01 职场文书
期末复习计划
2015/01/19 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
行政撤诉申请书
2015/05/18 职场文书
干部培训工作总结2015
2015/05/25 职场文书
外出听课学习心得体会
2016/01/15 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python