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

 首先我们先创建三个输入框,分别绑定响应的触发条件,微信双向绑定和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.arr
    arr.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>

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

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

  • 13
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值