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


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代码
Nov 04 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
小程序实现留言板
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+SqlServer实现分页显示
2006/10/09 PHP
php之readdir函数用法实例
2014/11/13 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python执行使用shell命令方法分享
2017/11/08 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python缩进长度是否统一
2020/08/02 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
xxx同志考察材料
2014/02/07 职场文书
物业总经理岗位职责
2014/02/28 职场文书
论文指导教师评语
2014/04/28 职场文书
水电站项目建议书
2014/05/12 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python