微信小程序入简单留言板
首先在home.wxml页面完成简单的布局
<input type="text" class="inp" placeholder="请输入留言" />
<button>点击提交</button>
<block>
<view wx:for="{{msgData}}" wx:key="index" class="list">
<text>{{index+1}}----{{item.msg}}</text>
<button size="mini" class="del">删除</button>
</view>
</block>
css样式代码片段
.box{
width: 500rpx;
height: 500rpx;
border: 1rpx solid #ccc;
}
.inp{
border:1px solid #000;
height:40px
}
.list{
display: flex;
border: 1px dashed #ccc;
}
.del{
margin-right: 0px;
}
页面展示图
逻辑操作
首先给input框和按钮绑定事件
在home.js中写事件函数
首先定义一个数组和变量
监听数据并存储到定义的变量中
当用户点击提交按钮的时候先定义一个list存储data中定义的msgData,然后再将input框中当前的输入的字符push到list中,最后再通过this.setData把list赋给msgData
当用户点击删除按钮的时候获取到当前点击的这组数据的下标,用list来存储msgData,然后通过splice方法来进行删除,最后再通过this.setData把list赋给msgData