好久不见,奉上一个TodoList的demo

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我不妨也叫自己是“二十二个不幸”! 《樱桃园》里有个叫叶比霍多夫的,他愚蠢却又不乏理想,大家都叫他“二十二个不幸”...
    叶虚愚阅读 737评论 0 0
  • 你的职责是什么?比别人多勤奋一点、多努力一点、多一点理想,这就是你的职责。傻瓜用嘴讲话,聪明人用脑袋讲话,智者用心讲话!
    喜述阅读 129评论 0 0
  • 1、js面向对象 2、new构造函数创建
    Simon_s阅读 455评论 0 0