【原创纯手打】如何用微信小程序写留言板(附代码)

首先我们先创建三个输入框，分别绑定响应的触发条件，微信双向绑定和VUE不一样，需要setData

名字<input type="text" value="{{name}}" bindinput="setName"/>
年龄<input type="text" value="{{age}}" bindinput="setAge"/>
留言<input type="text" value="{{title}}" bindinput="setTitle"/>

在js文件中写

  setName(e){this.setData({name:e.detail.value})},setAge(e){this.setData({age:e.detail.value})},setTitle(e){this.setData({title:e.detail.value})},

接着在按钮上绑定事件，当按下时触发条件，然后传递给数组，然后渲染

  add(){if(this.data.name=="" || this.data.age==""){return wx.showToast({title: '填入不能为空',})}var obj={name:this.data.name,age:this.data.age,title:this.data.title,flag:false}var arr=this.data.arrarr.push(obj)this.save()this.setData({arr})this.updataNum()},

this.save()方法是本地存储，需要不断在每个功能下触发

  save(){wx.setStorageSync('todo', this.data.arr)},

然后在页面上渲染

<view class="list" wx:for="{{arr}}"><checkbox checked="{{item.flag}}" value="{{item.flag}}" bindtap="change" data-key="{{index}}"></checkbox><view>{{item.name}}</view><view>{{item.age}}</view><view">{{item.title}}</view><button type="warn" size="mini" plain="true" bindtap="del" data-key="{{index}}">删除</button>
</view>

这个时候我们可以绑定选定按钮，当我多选时可以做更多的操作，比如选中删除等等

这样一个完整的留言板就出来了！！！

【原创纯手打】如何用微信小程序写留言板(附代码)相关推荐

微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序做留言板是不是需要服务器,微信小程序怎么做个简单留言板？
首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml) placeholder="请输入留言--" placeholder-class="place-input ...
微信小程序新手留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局 <input type="text" class="inp" placeholder= ...
微信小程序简单留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局 <input type="text" class="inp" placeholder= ...
微信小程序做留言板mysql_微信小程序留言板功能源码
微信小程序留言板功能源码?先说一下 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都 ...
微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（6）如何用微信小程序写一个论坛？贴心代码详解（四）搜索页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
【微信小程序canvas】实现小程序手写板用户签名(附代码)测试有效
工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml: <view class="wrapper"><view class="handBt ...
小程序php调用腾讯视频,如何用微信小程序来看腾讯视频？观看视频的办法
软件安装:腾讯视频腾讯视频于2016年底提出了全新的品牌理念--"不负好时光",以更加年轻化.更能引起用户情感共鸣的定位全新亮相,并展现了全新品牌标识.秉承"内容为王, ...

【原创纯手打】如何用微信小程序写留言板(附代码)

【原创纯手打】如何用微信小程序写留言板(附代码)相关推荐

最新文章

热门文章