小程序实现留言板


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 hashtable实现代码
Oct 13 Javascript
javascript深入理解js闭包
Jul 03 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue异步加载about组件
2017/10/31 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
django url到views参数传递的实例
2019/07/19 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python实现一个优先级队列的方法
2020/07/31 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
电台编导求职信
2014/05/06 职场文书
工程售后服务方案
2014/06/08 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
督导岗位职责范本
2015/04/10 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js