微信todolist案例

野性酷女 2022-12-09 05:22 147阅读 0赞

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_375x700]

## 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样式不生效  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_375x700]: /images/20221123/4f1a8103620a401cb17c56c635cc4aca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5c5bed8331ec41cdac37e79b73d76892.png