小程序实现留言板


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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
js loading加载效果实现代码
Nov 24 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
document.compatMode介绍
2009/05/21 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
js实现照片墙功能实例
2015/02/05 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现的读写json文件功能示例
2018/06/05 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
美工的岗位职责
2013/11/14 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
员工规章制度范本
2015/08/07 职场文书