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


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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jquery选择器使用详解
Apr 08 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JavaScript实现滑块验证解锁
Jan 07 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来检测proxy
2006/10/09 PHP
php adodb操作mysql数据库
2009/03/19 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
Python的多态性实例分析
2015/07/07 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python实现图片识别汽车功能
2018/11/30 Python
python进行文件对比的方法
2018/12/24 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python加速程序运行的方法
2020/07/29 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
手机业务员岗位职责
2013/12/13 职场文书
小小的船教学反思
2014/02/21 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
精彩的广告词
2014/03/19 职场文书
租房协议书样本
2014/08/20 职场文书
平面设计师岗位职责
2014/09/18 职场文书
员工保密协议书
2014/09/27 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
Python序列化模块JSON与Pickle
2022/06/05 Python