小程序实现留言板
程序员文章站
2023-11-08 15:10:16
本文实例为大家分享了小程序实现留言板的具体代码，供大家参考，具体内容如下
wxml
本文实例为大家分享了小程序实现留言板的具体代码，供大家参考，具体内容如下
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还可以*去编写，但是想实现在快速留言后面，再添加内容
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。