微信todolist案例

效果图

wxml部分

<input class="text" type='text' placeholder='请输入内容' bindinput='getval' value='{{val}}'/>

<button class="addBtn" bindtap='add'>添加</button>

<view wx:for="{{list}}" wx:key="{{index}}" class="box">

    <text>{{index+1}}---{{item}}</text>

    <button class="cellBtn" size='mini' bindtap='del' data-index="{{index}}">删除</button>

</view>

js部分

Page({
  data: {
    info:'hello word!',

id:1,

arr:[1,2,3,4,5,6,'hello'],

val:'',

list:[]


  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  },
  getval(e){
    // console.log(e.detail.value)

    this.setData({ val: e.detail.value})

},

add(){
    var data1 = this.data.list;

    data1.push(this.data.val)

    this.setData({list:data1,val:''})

},

del(e){
    // console.log(e.target.dataset.index)

    var i = e.target.dataset.index;

    var data2 = this.data.list;

    data2.splice(i,1)

    this.setData({list:data2})

},


})

wxss

.text{
  border: 1px solid black;
}
button.addBtn{
  display: block;
  width: 100vw;
  height: 100rpx;
}
.box{
  line-height: 100%;
  border: 1rpx dashed black;
  overflow: hidden;
}
.cellBtn{
  margin-right: 5rpx;
  float: right;
}

注意

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

BUG处理

修改button样式不生效