微信小程序实现todolist

微信小程序复习第二天

自己实现一个todolist的效果，首先是wxml页面布局

<!--pages/home/home.wxml-->
<view>
	<view class="box_top">TODOLIST</view>
	<view class="box_center">
		<input value="{{value}}" bindinput="changevalue" class="todolist_input"></input>
		<button class="todolist_submit" bindtap="submit">提交</button>
	</view>
	<view class="box_bottom">
		<view>未完成</view>
		<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" hidden="{{item.hide}}" wx:key="index" class="onehang" data-index="{{index}}" bindtap="dbclick">
			<checkbox bindtap="changecheckbox" checked="{{item.hide}}"></checkbox>
			<view wx:if="!{{item.change}}"  data-index="{{index}}" >
			{{item.value}}
			</view>
			<input class="chenge_input"  wx:if="{{item.change}}" value="{{item.value}}"></input>
		</view>
		<view>
			已完成
		</view>
		<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" hidden="{{!item.hide}}" wx:key="index">
			<checkbox checked="{{item.hide}}" data-index="{{index}}" bindtap="changecheckbox"></checkbox>
			{{item.value}}
		</view>
	</view>
</view>

接着是js部分

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    start: 0,
    last: 0,
    value: "",
    list: []
  },
  //输入框改变事件
  changevalue(e) {
    this.data.value = e.detail.value
  },
  //点击提交事件
  submit() {
    this.data.list.push({
      value: this.data.value,
      hide: false,
      change: false
    })
    this.setData({
      list: this.data.list,
      value: ""
    })
    console.log(this.data.list)
  },
  //复选框改变
  changecheckbox(e) {
    let index = e.target.dataset.index
    this.data.list[index].hide = !this.data.list[index].hide
    this.setData({
      list: this.data.list
    })
    console.log(this.data.list)
  },
  //双击事件
  dbclick(e) {
    //点击记录时间
    let index = e.target.dataset.index
    console.log(e)
    var startime = e.timeStamp //当前点击的时间
    var lasttime = this.data.last //当前data中的最后一次点击时间 
    this.data.last = startime //把第上一次的时间给到data最后一次点击上 保存一下
    console.log(startime, lasttime)
    if (startime - lasttime < 300) {
      this.data.list[index].change = true
      this.setData({
        list: this.data.list
      })
    }


  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

css样式如下代码

/* pages/home/home.wxss */
.box_top {
  text-align: center;
}

.box_center {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.todolist_input {
  border: 1px solid black;
  width: 200px;
  border-radius: 10px;
  height: 20px;
}

.todolist_submit {
  width: 80px !important;
  font-size: 10px;
  height: 30px;
}
.chenge_input{
  border: 1px solid black;
  width: 200px;
  height: 20px
}
.onehang{
  display: flex;
  align-items: center;
  justify-content: start;
}

总结以下微信小程序需要注意的地方，很长时间没有碰了所以就是现在来回顾一下，借助这个todolist来回顾下

1，输入框是input标签，按钮是button标签，想要更改button按钮样式宽度就需要加上! important去增加权重

2，微信小程序中的循环是用wx:for=“”来实现的，其中wx:for-item=“item”,wx:for-index="index"来重新定义新的item和index

3，点击事件是bindtap="changecheckbox"点击事件需要的传值就用到data-参数名=“参数值”来实现传值，在js中通过e来接受

4，js部分在data中定义数据，在每个更改了数据的方法后面要加上this.setdata来更新数据实现页面更新