小程序实现留言板


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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
纯js实现动态时间显示
Sep 07 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
详解TypeScript的基础类型
Feb 18 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
js实现二级导航功能
2017/03/03 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python logging设置和logger解析
2019/08/28 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
高中的自我鉴定
2013/12/16 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
工程承包协议书范本
2014/09/29 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
关于五一放假的通知
2015/08/18 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
信息技术国培研修日志
2015/11/13 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js