小程序实现留言板


Posted in Javascript onNovember 02, 2018

本文实例为大家分享了小程序实现留言板的具体代码,供大家参考,具体内容如下

wxml

<view class='section'>
 <textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='80' style="word- wrap:break-word" onfocus="this.blur()" bindtap=''></textarea>
</view>
<view class='fast'>快速捎话:{{neirong}}</view>
 
<view class="item" wx:for="{{msgData}}" wx:key="{{index}}">
<view class='circle'></view>
 <text data-nr='{{item.msg}}' class='message_font' bindtap='clickMe'>{{item.msg}}</text>
</view> 
 
<button class='submit'>捎话</button>

index.js

var nr = '';
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
 
  msgData:
  [
   {
    msg:
    "泡澡水不要太热。"
   },//双引号
   {
    msg:
    "面部比较干,想补个水。"
   },
   {
    msg:
    "我只有2小时,您看着安排吧。"
   },
   {
    msg:
    "我想把眉毛在修下。"
   },
   {
    msg:
    "给我清个痘痘。"
   },
   {
    msg:
    "头疼,能轻点按。"
   }
  ],
  neirong: '',
 
 },
 
 clickMe: function (e) {
  var that = this;
  console.log(e);
  nr = e.currentTarget.dataset.nr;
  that.setData({
   neirong: nr
  })
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

wx.css

/*捎话wx.css */
.section{
width:96%;
height:220rpx;
margin-left:5px;
}
.message1{
 width:96%;
 height:210rpx;
 margin-top: 30rpx;
 font-size: 90%;
 margin-left:20px;
}
.circle{
 height:35rpx;
 width:35rpx;
 border-radius: 50%;
 border: 1px 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;
}
.message_font{
 font-size:80%;
 font-family:"微软雅黑";
 font-weight:blod;
 display:inline-block;
 position:relative;
 top:-5rpx;
}
.submit{
 width:100%;
 height: 100rpx;
 background: #fed1d6;
 position: relative;
 top:168rpx;
 line-height: 100rpx;
}
button::after{
 border:none;
 }

小程序实现留言板

但是上面的textarea还可以自由去编写,但是想实现在快速留言后面,再添加内容

小程序实现留言板

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

Javascript 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
使用SVG基本操作API的实例讲解
Sep 14 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
Vue列表渲染的示例代码
Nov 01 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
Javascript之String对象详解
2016/06/08 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
python双向链表实现实例代码
2013/11/21 Python
tensorflow识别自己手写数字
2018/03/14 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python变量访问权限控制详解
2019/06/29 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
PHP面试题及答案一
2012/06/18 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
销售员岗位职责范本
2014/02/03 职场文书
总裁助理岗位职责
2014/02/17 职场文书
广播体操口号
2014/06/18 职场文书
廉政承诺书
2015/01/19 职场文书