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


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源码不错的工具
Dec 26 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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 中的一些经验积累
2006/10/09 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
功能强大的php分页函数
2016/07/20 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python简单I/O操作示例
2019/03/18 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
技术总监的工作职责
2013/11/13 职场文书
个性婚礼策划方案
2014/05/17 职场文书
离婚律师函范本
2015/05/27 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
改造DE1103三步曲
2022/04/07 无线电
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技