微信小程序简单留言板

最新推荐文章于 2023-08-25 12:18:13 发布

虞南北

最新推荐文章于 2023-08-25 12:18:13 发布

阅读量908

点赞数 1

分类专栏：小程序文章标签： javascript

本文链接：https://blog.csdn.net/weixin_57748960/article/details/116464962

版权

本文介绍了如何在微信小程序中创建一个简单的留言板功能。通过在home.wxml中设置布局，结合CSS样式，实现页面展示。在home.js中绑定input框和按钮事件，使用数组和变量存储用户输入，通过setData更新数据。当用户提交或删除留言时，利用数组方法动态管理留言列表。

摘要由CSDN通过智能技术生成

微信小程序入简单留言板
首先在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框和按钮绑定事件

最低0.47元/天解锁文章

虞南北

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
微信小程序简单留言板

微信小程序入简单留言板首先在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}}&lt...
复制链接

扫一扫

专栏目录