微信小程序 实现todolist 简单入门案例

效果图:

下面展示代码：
wxml页面

 
<view>
	<!-- 输入框 -->
	<view class="inputDiv">
		<text class="add" bindtap="addNew">+</text>
		<input focus="{{inputShowed}}" placeholder="在这里输入您的待办事项吧" type="text" value="{{ inputVal }}" bindinput="inputChange" bindconfirm="addNew"></input>
	</view>
	<!-- 展示 -->
	<view class="content">
		<view class="itemView" bindtap="selClick" wx:for='{{todolist}}' wx:key='index' data-index="{{index}}">
			<!-- 选中状态 -->
			<view>
				<icon size="14" type="{{item.completed? 'success' : 'circle'}}" class="leftIcon"></icon>
				<text class="{{item.completed ?'name':''}}">{{item.name}}</text>
			</view>
			<icon type="clear" size="12" catchtap="clickClear" data-index="{{index}}"></icon>
		</view>
	</view>

	<!-- 页尾巴 -->
	<view class="footer" wx:if="{{!show && todolist.length != 0}}">
		<text bindtap="selAll">全选</text>
		<text class="allCount">共: <text class='color'>{{allCount}}</text> 条</text>
		<text class="allCount">选中: <text class='color'>{{selCount}} </text>条</text>
		<text bindtap="clearAll">clear</text>
	</view>

</view>

<!-- null -->
<view class='null' wx:if="{{show || todolist.length == 0}}">
	null
</view>

<!-- <button open-type="getUserInfo" bindgetuserinfo="click">用户信息</button> -->

js页面

  // this 当前页面对象
Page({
  data: {
    inputVal: '', //输入框的内容
    todolist: [],
    allCount: 0,
    allCompleted: false,
    selCount: 0,
    show:false,
    inputShowed: true,
  },
  //数据流 单向 so给文本框绑定事件
  inputChange(e) {
    // console.log(e.detail.value);
    this.setData({
      inputVal: e.detail.value
    })
  },
  //点击按钮触发回调函数 给数组添加数据
  addNew() {
    if (!this.data.inputVal) {
      return
    }
    // console.log(this.data.inputVal);
    this.data.todolist.unshift({
      name: this.data.inputVal,
      completed: false,
     
    });

    // 必须通过setData() 页面才会发生变化
    this.setData({
      todolist: this.data.todolist,
      inputVal: '',
      allCount: this.data.allCount + 1,
      show:false,
    });
    this.save()

  },
  //点击 选中状态
  selClick(e) {
    //当前的索引
    var item = this.data.todolist[e.currentTarget.dataset.index]
    console.log(item);
    item.completed = !item.completed;
    let selCount = this.data.selCount + (item.completed ? 1 : -1);


    this.setData({
      selCount: selCount,
      todolist: this.data.todolist
    })
    this.save()
  },
  //点击删除
  clickClear(e) {
    // console.log(e.currentTarget.dataset.index);
    let item = this.data.todolist.splice(e.currentTarget.dataset.index, 1)[0];
    console.log(item);

    this.setData({
      todolist: this.data.todolist,
      allCount: this.data.allCount - 1,
      selCount: this.data.selCount - (item.completed ? 1 : 0)
    })
    this.save()
  },
  //全选
  selAll() {
    this.data.allCompleted = !this.data.allCompleted;
    var that = this;
    this.data.todolist.forEach(function (item) {
      item.completed = that.data.allCompleted
    });

    this.setData({
      todolist: this.data.todolist,
      allCount:this.data.todolist.length,
      selCount: this.data.allCompleted ? this.data.todolist.length : 0,
    })
    this.save()
  },
  //删除
  clearAll() {
    // let todo = this.data.todolist.filter(function (item) {
    //   return !item.completed
    // })
    this.setData({
      todolist: [],
      allCount: 0,
      selCount: 0,
      show:true,
    })
    this.save()
  },
  //本地存储
  save() {
    //本地存储
    try {
      wx.setStorageSync('todolist', this.data.todolist)
    } catch (e) {
      console.error(e)
    }
  },
  onLoad: function (options) {
    //初始化数据
    let list = wx.getStorageSync('todolist')
    var num = [];
    if (list) {
      list.forEach(function (item) {
        if (item.completed) {
          num.push(item)
        }
      })
      this.setData({
        todolist: list,
        allCount: list.length, //总数
        selCount: num.length, //选中个数
      })
    }
  }
})

wxss

/* pages/mine/mine.wxss */
.inputDiv {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 100rpx;
  padding: 0 50rpx 20rpx 50rpx;
  box-sizing: border-box;
}
.add {
  width:10%;
  border-radius: 10rpx 0 0 10rpx;
  text-align: center;
  border: 1rpx solid #ddd;
}
input {
  border-top: 1rpx solid #ddd;
  border-bottom: 1rpx solid #ddd;
  border-right: 1rpx solid #ddd;
  width:90%;
  border-radius: 0 10rpx 10rpx 0 ;
  text-indent: 20rpx;
  font-size: 24rpx;
}
.itemView {
  width: 100%;
  height: 50rpx;
  border-bottom: 1rpx solid #ddd;
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  
}
.leftIcon {
  margin-right: 50rpx;
}
.name {
  text-decoration-line: line-through;
  color: #999;
}
.allCount {
  color: #333;
}
.content {
  width:100% ;
  padding: 0 50rpx;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
 
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  color: #333;
  font-size: 30rpx;
}
.color {
  color: red;
  font-weight: 600;
}
.null {
   text-align: center;
   color: #333;
}
 

~~