.wxml:
<view class = "title">
狂飙经典语录
</view>
<view class="out">
<block wx:if="{{listArr.length}}"> <!-- bloock不会影响排版-->
<view class="list">
<view class="row" wx:for="{{listArr}}" wx:key="id">
<view class="text">{{index+1}}.{{item.title}}</view> <!-- data-nums:传参数nums-->
<view class="close" bind:tap="clickClose" bind:tap="clickClose" data-nums="{{index}}">
<icon type ="clear" size="26"></icon>
</view>
</view>
</view>
<view class="count">
共 {{listArr.length}} 条评论
</view>
</block>
<view wx:else style="text-align: center;font-size: 38rpx; color: #555;padding: 20rpx 0 ;">暂无语录，请添加</view>
<!--
<view class="count" wx:if="{{listArr.length}}">
共 {{listArr.length}} 条评论
</view>
<view wx:else style="text-align: center;font-size: 38rpx; color: #555;padding: 20rpx 0 ;">暂无语录，请添加</view>
-->
<view class="comment"> <!-- model:value="{{iptValue}} 双向绑定-->
<!-- bindconfirm="onSubmit" 敲回车和点击发布按钮功能一样-->
<input type="text" placeholder="请输入评论内容..."placeholder-style="color:#aaa;font-size:30rpx;"
model:value="{{iptValue}}" bindconfirm="onSubmit"
/>
<button size="mini" type="primary" disabled="{{!iptValue.length}}" bind:tap="onSubmit">发布</button>
</view>
</view>
.js:
// pages/test1/test1.js
Page({
/**
* 页面的初始数据
*/
data: {
iptValue:"",
listArr:[
{id:12345678,title:"告诉老墨，我想吃鱼！！"},
{id:12345679,title:"咖啡不用冲，迟早会成功"},
{id:12345670,title:"妻管严，很幸福的"}
]
},
onSubmit(){
console.log(this.data.iptValue);
let value = this.data.iptValue;
let arr = this.data.listArr;
arr.push({
id:Date.now(),//设置时间戳，保证id不会重复；
title:value
});
this.setData({
listArr:arr,
iptValue:""//把输入框清空
});
//发布成功，来个showToast提示:
wx.showToast({
title:"发布成功"
})
},
clickClose(e){
//点击删除的时候不能立即删除：
wx.showModal({
title: "是否确认删除",
content:"删除之后不可恢复，请谨慎删除",
success:res=>{
if(res.confirm){
console.log("留言的下标index为："+e.currentTarget.dataset.nums);
let {index} = e.currentTarget.dataset;
let arr = this.data.listArr;
arr.splice(index,1);//从下标index开始，移出几个元素
this.setData({
listArr:arr
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.wxss:
.title{
font-size: 50rpx;
text-align:center;
color: #161515;
border:solid pink;
padding: 50rpx 0 30rpx;
}
.out{
border:solid pink;
width: 690rpx;
margin: 30rpx;
box-shadow:0 15rpx 40rpx rgba(0,0,0,0.5);/*它可以向框添加一个或多个阴影*/
border-radius: 15rpx;/*设置边框圆角*/
padding: 30rpx;
/*border-box就是将border和padding数值包含在width和height之内, 好处就是修改border和padding数值盒子的大小不变*/
box-sizing:border-box;
}
.out .list .row{
padding: 15rpx 0;/*上下左右的内边距*/
border-bottom: 5rpx solid #e8e8e8;/*设置元素下边框的样式*/
display:flex;/*布局*/
/*可以均匀排列盒子中的每个元素,首个元素放置于起点,末尾元素放置于终点。达到左右对齐的效果:*/
justify-content: space-between;
align-items: center;/*align-items常用来设置垂直方向对齐方式 align-items: center;常用设置居中 */
font-size: 34rpx;
font-weight: 500;
color: #161515;
}
.out .list .row .text{
padding-right: 10rpx;
box-sizing:border-box;
}
.out .count{
padding: 20rpx 0;
text-align: center;
color: #888;
font-size:30rpx;
}
.out .comment{
display: flex;
margin-top: 20rpx;
}
.out .comment input{
flex:4 ;
background: #f4f4f4;
margin-right: 10rpx;
height: 100%;
height: 64rpx;
border-radius: 15rpx;
color: #333;
padding: 0 0rpx;
}
.out .comment button{
flex :1;
}