小程序实现留言板


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 精粹笔记
May 09 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
js实现批量删除功能
Aug 27 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
javaScript Array api梳理
Mar 31 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
配置支持SSI
2006/11/25 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python中replace方法实例分析
2014/08/20 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python实现k-means算法
2018/02/23 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Django中template for如何使用方法
2021/01/31 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
半年思想汇报
2013/12/30 职场文书
大班开学家长寄语
2014/04/04 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
天下第一关导游词
2015/02/06 职场文书
大学毕业生个人总结
2015/02/28 职场文书
南京大屠杀观后感
2015/06/02 职场文书