小程序实现留言板


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 相关文章推荐
js中reverse函数的用法详解
Dec 26 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
vuejs指令详解
Feb 07 Javascript
Vue实现双向数据绑定
May 03 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 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 采集程序原理分析篇
2010/03/05 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript object array方法使用详解
2012/12/03 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python爬取youtube视频的示例代码
2021/03/03 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
销售文员的岗位职责
2013/11/20 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
征兵宣传标语
2014/06/20 职场文书
教师党员个人自我评价
2015/03/04 职场文书
单位接收证明格式
2015/06/18 职场文书