微信小程序：todo...list列表

微信小程序：todo…list

wxml内容：

<!-- 这里可以通过bindinput或者model:value两种方法去获得input里面的值 -->
<view class="getValue">
  <input type="text" value="{{inputValue}}" bindinput="getInput" class="inputVal" />
  <button bindtap="getVal" class="btnGet" size="mini">getVal</button>
</view>
<!-- 未选中 -->
<view class="isSelect">未选中</view>
<label class="weui-cell weui-check__label" wx:for="{{getValList}}" wx:key="index">
  <view hidden="{{item.checked}}" class="isShow">
    <checkbox bindtap="add" checked="{{item.checked}}" data-index="{{index}}" />
    <view>{{item.text}}</view>
    <text catchtap="delete" data-index="{{index}}" class="deleteItem">删除</text>
  </view>
</label>
<!-- 已选中 -->
<view class="isSelect">
  已选中
</view>
<label class="weui-cell weui-check__label" wx:for="{{getValList}}" wx:key="index">
  <view hidden="{{!item.checked}}" class="isShow">
    <checkbox bindtap="add" checked="{{item.checked}}" data-index="{{index}}" />
    <view style="{{item.checked?'text-decoration:line-through':''}}">{{item.text}}</view>
    <text catchtap="delete" data-index="{{index}}" class="deleteItem">删除</text>
  </view>
</label>

wxcc内容（样式很low仅供参考）：

/* input */
.getValue{
  display: flex;
}
.inputVal{
  border: 1px solid red;
  margin-left: 50rpx;
  height: 60rpx;
  width: 500rpx;
}
.btnGet{
  background-color: gray;
}
.weui-cell{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 50rpx;
  margin-top: 30rpx;
}
.checkBoxInput{
  display: flex;
  justify-content: space-around;
}
.deleteItem{
  background-color: green;
}
/* 是否选中 */
.isSelect{
  text-align: center;
  margin-bottom: 50rpx;
  margin-top: 30rpx;
  font-size: 45rpx;
  background-color: greenyellow;
  border-radius: 2.667vh;
}
text{
  display: block;
  width: 100rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 2.667vh;
}
.isShow{
  width: 80%;
  display: flex;
  justify-content: space-between;
}

js内容：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //input框的值
    inputValue:null,
    //获得input框的值
    getValue:null,
    //数组列表
    getValList:[
     {
      checked:false,
      text:"今天早点睡！！"
     },
     {
      checked:true,
      text:"今天睡！！"
     },
    ],
  },
  //input框的值
  getInput(e){
    this.data.getValue=e.detail.value
  },
  //获得输入框的值并给到数组
  getVal(){
    // 获得input框的值push到数组中
    this.data.getValList.push({
      checked:false,
      text:this.data.getValue,
    }) 
    //添加成功
    wx.showToast({
      title: '添加成功',
    })
    this.setData({
     getValList:this.data.getValList
    })
    wx.setStorageSync('getValList', this.data.getValList)
    //点击让input框的值为空
    this.setData({
      inputValue:'',
    })
  },
  //复选框
  add(e){
    console.log(e)
    console.log(e.target.dataset.index);
    let index = e.target.dataset.index
    //优化
    this.data.getValList[index].checked = !this.data.getValList[index].checked
    this.setData({
      // [`getValList[${index}].checked`] : !this.data.getValList[index].checked
      getValList:this.data.getValList
    })
    //存本地（同步）
    wx.setStorageSync('getValList', this.data.getValList)
  },
  //删除
  delete(e){
    let index = e.target.dataset.index
    //点击删除弹出模态框（是否删除）
    wx.showModal({
      title: '提示',
      content: '是否清除',
      success:(res)=>{
        console.log(res);
        if(res.confirm){
          //通过索引删除元素
          this.data.getValList.splice(index,1)
          this.setData({
            getValList:this.data.getValList
          })
          wx.showToast({
            title: '删除成功',
          })
        }else if(res.cancel){
          this.setData({
            getValList:this.data.getValList
          })
          wx.showToast({
            icon:'error',
            title: '取消删除',
          })
        }
      }
    })
    //存本地（同步）
    wx.setStorageSync('getValList', this.data.getValList)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //页面加载从本地中取出内容（同步）
    let list=wx.getStorageSync('getValList')
    this.setData({
      getValList:list||this.data.getValList
    })
  },