小程序实现留言板


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 防止表单重复提交代码
Jan 21 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
javascript表单事件处理方法详解
May 15 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
js a标签点击事件
Mar 30 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
浅谈vue异步数据影响页面渲染
Oct 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实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python饼状图的绘制实例
2019/01/15 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
单位介绍信范文
2014/01/18 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Python语言内置数据类型
2022/02/24 Python