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


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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
js实现简易计算器功能
Oct 18 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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的memcache类分享(memcache队列)
2014/03/26 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python多线程之事件Event的使用详解
2018/04/27 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
学习python的前途 python挣钱
2019/02/27 Python
Python matplotlib可视化实例解析
2020/06/01 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
美的官方商城:Midea
2016/09/14 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
保洁主管岗位职责
2013/11/20 职场文书
初中政治教学反思
2014/01/17 职场文书
财经学院自荐信范文
2014/02/02 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
土地转让协议书范本
2014/04/15 职场文书
保护环境建议书100字
2014/05/13 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
课外活动实习计划
2015/01/19 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers