小程序实现留言板


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 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
先进集体获奖感言
2014/02/13 职场文书
产品质量承诺范本
2014/03/31 职场文书
车辆工程专业求职信
2014/06/14 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
情况说明书怎么写
2015/10/08 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers