小程序实现留言板


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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
vue请求数据的三种方式
Mar 04 Javascript
js实现购物车商品数量加减
Sep 21 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
js 提交和设置表单的值
2008/12/19 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue综合组件间的通信详解
2017/11/06 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
js中url对象化管理分析
2017/12/29 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
探索node之事件循环的实现
2020/10/30 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python如何实现邮件功能
2020/05/27 Python
Python如何telnet到网络设备
2021/02/18 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
教师节班会开场白
2015/06/01 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python