微信小程序简单留言板

微信小程序入简单留言板
首先在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

微信小程序简单留言板相关推荐

微信小程序做留言板是不是需要服务器,微信小程序怎么做个简单留言板？
首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml) placeholder="请输入留言--" placeholder-class="place-input ...
微信小程序新手留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局 <input type="text" class="inp" placeholder= ...
微信小程序做留言板mysql_微信小程序留言板功能源码
微信小程序留言板功能源码?先说一下 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都 ...
【原创纯手打】如何用微信小程序写留言板(附代码)
首先我们先创建三个输入框,分别绑定响应的触发条件,微信双向绑定和VUE不一样,需要setData 名字<input type="text" value="{{nam ...
微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)
微信小程序简单的信息表格的提交到数据库(新手专属)(云端数据库) 大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网 ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...

微信小程序简单留言板

微信小程序简单留言板相关推荐

最新文章

热门文章