小程序TodoList实战教程，，，，，，看完官方的文档介绍后，，，，，，就想找个简朴的例子来验证实现一下，，，，，，TodoList MVC就很好了，，，，，，简朴容易。。。。

之前都用JQ、Backbone、vue简朴撸过，，，，，，或许功效如下：

1小程序手指缩放图片开发历程

下载小程序开发工具：开发者工具下载

装置完成后，，，，，，使用微信扫一扫登录，，，，，，选好文件夹后建设即可，，，，，，开发工具会自动天生以下目录：

pages/

app.js

app.json

app.wxss

文录结构和详细设置审查官方文档：mp.weixin.qq.com/debug/wxado…

2基本设置

由于平时开发习习用Less，，，，，，若是在直接使用小程序的wxss来编写的话，，，，，，就恢回复生编写方式，，，，，，大大的未便，，，，，，以是直接使用了gulp来实时编译Less，，，，，，和修改文件名为wxss。。。。小程序开发工具是不支持Less，，，，，，直接用vscode来开发，，，，，，小程序开发工具是用实时预览和调试即可，，，，，，vscode也有富厚的插件支待小程序语法提醒。。。。

// gulpfile.js
var gulp = require('gulp')
var less = require('gulp-less')
var plumber = require('gulp-plumber')
var rename = require('gulp-rename')

gulp.task('less', function () {
  return gulp.src('./app.less')
    .pipe(plumber())  // 过失处理
    .pipe(less()) // 编译less
    .pipe(rename((path) => path.extname = '.wxss')) // 编译后天生文件修改后缀为.wxss
    .pipe(gulp.dest('./'));
});
gulp.watch('./app.less', ['less']); // 实时监控app.less文件转变，，，，，，运行使命

UI组件也直接引用了小程序支持的weui-wxss

@import "./weui.wxss";

在app.json界说好小程序页面路由和配色：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ca2100",
    "navigationBarTitleText": "TodoList",
    "navigationBarTextStyle":"white"
  }
}

3页面开发

页面文件都存放在pages/目录下，，，，，，每个功效页面都会建设一个文件夹，，，，，，TodoList现只需一个页面完成即可

数据绑定使用 Mustache 语法（双大括号）将变量包起来

{{userInfo.nickName}}

所有

添加todo

使用字段addShow来判断添加输入层显示隐藏即可

input输出框这里不是双向绑定，，，，，，以是这里添加一个事务bindinput="setInput"来赋值实时转变

<view class="addForm {{addShow?'':'hide'}}">
    <view class="addForm-p">
      <input bindinput="setInput" class="weui-input" focus="{{focus}}" placeholder="请输入todo" value="{{addText}}" />
      <view class="addForm-btn"><button bindtap="addTodo" class="weui-btn mini-btn" size="mini" type="warn">确定添加</button><button bindtap="addTodoHide" class="weui-btn mini-btn" size="mini" type="default">作废</button>
      </view>
    </view>
  </view>

实时赋值事务处理

setInput: function (e) {
    this.setData({
      addText: e.detail.value
    })
}

作废时，，，，，，需要清空input的值，，，，，，input里需要绑定value="{{addText}}"

Page({
 data:{
     //...
 }, 
 //...
 addTodoHide: function () {
    this.setData({
      addShow: false, // 控制添加输入面板隐藏
      focus: false, // 失去焦点
      addText: '' // 清空值
    })
 }
 //...
})

添加todo

Page({
 data:{
     //...
 }, 
 //...
 addTodo: function () {
    // 检查有没有输入
    if (!this.data.addText.trim()) {
      return
    }
    var temp = this.data.lists // 取出lists
    var addT = {
      id: new Date().getTime(), // 取目今时间
      title: this.data.addText,
      status: '0'
    }
    temp.push(addT) // 添加新的todo
    this.showCur(temp) // 处理目今状态的要领
    this.addTodoHide() // 添加乐成后，，，，，，隐藏添加面板要领
    wx.setStorage({ // 小程序异步缓存
      key:"lists",
      data: temp
    })
    wx.showToast({ // weui toast组件
      title: '添加乐成!',
      icon: 'success',
      duration: 1000
    });
 }
 //...
})

列表部分

scroll-view内转动

列表渲染，，，，，，事务触发，，，，，，使用data传参，，，，，，bind绑定事务

    
    
      暂无数据
    
    
    
      
      
        
        
        {{item.title}}
        
        {{api.formatTime(item.id)}}
      
      
      删除
    
  

滑动删除

效果：当向左滑动时，，，，，，content追随手指像左移动，，，，，，同时右侧泛起del按钮;当滑动距离大于按钮宽度一半松开手指时自动滑动到左侧显示出按钮，，，，，，小于一半时自动回到原来的位置，，，，，，隐藏按钮。。。。

实现思绪：content和del按钮划分是绝对定位，，，，，，使用z-index层来控制让content来盖住del，，，，，，当content向左滑动时，，，，，，del按钮就会露出来。。。。

微信小程序api提供的touch工具和3个有关手指触摸的函数（touchstart，，，，，，touchmove，，，，，，touchend）来实现content随手指移动

详细api说明，，，，，，请审查：mp.weixin.qq.com/debug/wxado…

列表的content已绑定这个三个事务：bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"

实现要领：

注重txtStyle，，，，，，在content在绑定这个属性的，，，，，，实现追随手指移动的

delBtnWidth为了del按钮的宽度，，，，，，这里以rpx为单位

Page({
 data:{
     //...
 }, 
 //...
  touchS: function (e) {
    // console.log('最先：' + JSON.stringify(e))
    // 是否只有一个触摸点
    if(e.touches.length === 1){
      this.setData({
        // 触摸起始的X坐标
        startX: e.touches[0].clientX
      })
    }
  },
  touchM: function (e) {
    // console.log('移动：' + JSON.stringify(e))
    var _this = this
    if(e.touches.length === 1){
     // 触摸点的X坐标
      var moveX = e.touches[0].clientX
      // 盘算手指起始点的X坐标与目今触摸点的X坐标的差值
      var disX = _this.data.startX - moveX
     // delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = _this.data.delBtnWidth
      var txtStyle = ''
      if (disX == 0 || disX < 0){ // 若是移动距离小于即是0，，，，，，文本层位置稳固
        txtStyle = 'left:0'
      } else if (disX > 0 ){ // 移动距离大于0，，，，，，文本层left值即是手指移动距离
        txtStyle = 'left:-' + disX + 'rpx'
        if(disX >= delBtnWidth){
          // 控制手指移动距离最大值为删除按钮的宽度
          txtStyle = 'left:-' + delBtnWidth + 'rpx'
        }
      }
      // 获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = _this.data.curLists
      // 将拼接好的样式设置到目今item中
      list[index].txtStyle = txtStyle
      // 更新列表的状态
      this.setData({
        curLists: list
      });
    }
  },
  touchE: function (e) {
    // console.log('阻止：' + JSON.stringify(e))
    var _this = this
    if(e.changedTouches.length === 1){
      // 手指移动竣事后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX
      // 触摸最先与竣事，，，，，，手指移动的距离
      var disX = _this.data.startX - endX
      var delBtnWidth = _this.data.delBtnWidth
      // 若是距离小于删除按钮的1/2，，，，，，不显示删除按钮
      var txtStyle = disX > delBtnWidth/2 ? 'left:-' + delBtnWidth + 'rpx' : 'left:0'
      // 获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index
      var list = _this.data.curLists
      list[index].txtStyle = txtStyle
      // 更新列表的状态
      _this.setData({
        curLists: list
      });
    }
  }
  //...
})

至此已完成，，，，，，TodoList实践例子，，，，，，功效简朴，，，，，，入门好例子。。。。

原码下载：github.com/CH563/TodoL…