微信小程序入简单留言板

首先在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

微信小程序新手留言板相关推荐

微信小程序简单留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局 <input type="text" class="inp" placeholder= ...
微信小程序做留言板mysql_微信小程序留言板功能源码
微信小程序留言板功能源码?先说一下 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都 ...
微信小程序做留言板是不是需要服务器,微信小程序怎么做个简单留言板？
首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml) placeholder="请输入留言--" placeholder-class="place-input ...
【原创纯手打】如何用微信小程序写留言板(附代码)
首先我们先创建三个输入框,分别绑定响应的触发条件,微信双向绑定和VUE不一样,需要setData 名字<input type="text" value="{{nam ...
微信小程序新手容易犯的错误_新手程序员的错误以及如何避免它们
微信小程序新手容易犯的错误 To become a Senior Java Developer, I've been learning Java for many years and still I' ...
微信小程序服务器新手教程,微信小程序新手教程上手开发与使用总结
微信小程序新手教程上手开发与使用总结,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧一.模板 WXML提供模板组件给我们使用,可以在模板定义公用的代码片段,然后在需要引用的地方进行调用. 定 ...
史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
从零开始：微信小程序新手入门宝典
小程序终于正式浮上水面,为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习. 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方 ...
原创：从零开始，微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使 ...

微信小程序新手留言板