Show

** 涵盖了这些知识点： **

• for循环渲染列表
• flex布局
• 悬浮加号按钮 position fixed
• 字符串的截取
• moment.js使用
• http api request使用
• bindtap与catchtap区别

列表页代码一览

var moment = require('../utils/moment');
Page({
    naviDetail: function () {
        wx.navigateTo({
            url: '../detail/detail'
        });
    },
    onShow: function () {
        this.loadData();
    },
    loadData: function () {
        wx.request({
            method: 'POST',
            url: 'http://node.it577.net:5001/list',
            success: result => {
                this.setData({
                    todos: result.data.map(item => {
                        item.createdAt = moment(item.createdAt).format('YYYY-MM-DD');
                        return item;
                    })
                })
            }
        });
    },
    edit: function (e) {
        console.log(e)
        var index = e.currentTarget.dataset.index;
        var _id = this.data.todos[index]._id;
        wx.navigateTo({
            url: '../detail/detail?_id=' + _id
        });
    },
    finish: function (e) {
        var index = e.currentTarget.dataset.index;
        wx.showModal({
            title: '确定要删除吗？',
            success: res => {
                if (res.confirm) {
                    wx.request({
                        method: 'POST',
                        url: 'http://node.it577.net:5001/delete',
                        data: {
                            _id: this.data.todos[index]._id
                        },
                        success: result => {
                            wx.showToast({
                                title: result.data.msg
                            });
                            this.loadData();
                        }
                    });
                }
            }
        });
    }
});

下载地址

https://gitee.com/laeser/todo-weapp

打算出套收费教程，如有需要配套视频讲解的同学请举个爪