.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;
}
