小程序实现留言板


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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
五段实用的js高级技巧
Dec 20 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
js与jquery回车提交的方法
2015/02/03 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python如何测试stdout输出
2020/08/10 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
与UNIX有关的几个名词
2015/09/17 面试题
面料业务员岗位职责
2013/12/26 职场文书
公益广告语集锦
2014/03/13 职场文书
整改报告怎么写
2014/11/06 职场文书
培训督导岗位职责
2015/04/10 职场文书
django上传文件的三种方式
2021/04/29 Python
python 实现图片特效处理
2022/04/03 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python