小程序实现留言板


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性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Jqprint实现页面打印
Jan 06 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
python多线程http下载实现示例
2013/12/30 Python
Python实现针对中文排序的方法
2017/05/09 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
numpy自动生成数组详解
2017/12/15 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
大型活动策划方案
2014/01/12 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
老人节主持词
2015/07/04 职场文书
学校运动会通讯稿
2015/07/18 职场文书
导游词之桂林山水
2019/09/20 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python