微信小程序开发（4）--发布评论

这里我要做的小程序是一个学生信息中心的小程序。所以其中之后难免会有发布评论这一个小部分。

1.输入内容部分设计

首先是输入框和按钮设计
新建一个page页面，在其中的 .wxml 文件中使用 view视图组件 以及 input 和 button 组件

<view class="box">
    <input type="text" class="box2" bindinput="bindtap" value="{{mytext}}"/>
    <button size="mini" bindtap="bindadd">提交button>
view>

然后在 .wxss 文件中使用 css样式

.box2 {
    width: 300px;
    height: 50px;
    border: 1px solid black;
}

.box {
    display: flex;
    flex-direction: row;
}
.box button {
    align-self: center;
}

2.绑定事件

1.给 输入框 绑定事件处理程序
input 组件有自己固有的绑定事件 bindinput 是键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。

data 数据设置：

data: {
        mytext:"",
        datalist:["111","222"]
    },

   bindtap( evt){    //evt 为事件参数
            // console.log(evt.detail)
            this.setData(
{
    mytext:evt.detail.value  //将输入框的值设置为data里的数据
}
            )
    },

2.给 button 绑定事件处理程序

 bindadd(){
        console.log(this.data.mytext)   //输入框文本
        this.setData({
            datalist:[...this.data.datalist,this.data.mytext],
            //...this.data.datalist是之前的数据，和输入框的数据连接
            mytext:""
        })
    },

3.将评论发布到指定区域

通过微信小程序开发（3）—数据绑定和条件渲染使用 view 组件 将评论发布到指定位置
当评论为空的时候，通过条件渲染让其显示为 暂无待办事项

<view wx:if="{{datalist.length}}">
    <view wx:for="{{datalist}}" wx:key="index" class="box3">
    <view class="box4">{{item}}view>
    <button bindtap="binddelete"  data-id="{{index}}">删除button>
    view>   //data-x  是将某数据量传递到 x 中
view>
<view wx:else="{{datalist.length}}">暂无待办事项view>

css 样式：

.box3 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

4.给删除添加事件处理程序

binddelete(evt){
        this.data.datalist.splice(evt.target.dataset.id,1)
        this.setData({
           datalist:this.data.datalist
        })
    }

5.效果

点击删除即可删除内容，当无评论的时候，就可以显示为暂无待办事项。