微信小程序纯内存存储实现todo list

本文介绍如何使用微信小程序实现一个Todo List,通过纯内存存储数据,包括点击切换编辑状态、处理事件冲突、注意sort()函数的排序问题等关键点。详细代码和注释已托管在Git。
摘要由CSDN通过智能技术生成

效果显示

todo-list.gif

几个技能点

  1. 点击view切换可编辑状态的input,回车后,要回到文本模式
  2. 将bindtap改为catchtap,阻止与checkbox冲突
  3. 注意sort()函数的坑,是按字符ascii排序,而非数值大小,所以要传递sort()排序回调方法

代码

代码里有详情的注释,完整代码托管在git,https://gitee.com/laeser/demo-weapp
)

JS文件

Page({
  data: {
    todos: [
      {
        title: '明天9点打电话给老张'
      },
      {
        title: '打电话给老王'
      },
      {
        title: '打电话'
      }
    ]
  },
  onLoad() {
    // 调用模拟数据代码,需要时打开下面的注释
    // this.mock()
  },
  // 模拟长列表数据源
  mock() {
    // 生成12行数据,看底部删除按钮是否正常
    const todos = []
    for (let index = 0; index < 12; index++) {
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序登录页面代码实现: 1. 在 app.json 文件中添加以下代码: ``` "pages": [ "pages/login/login" ] ``` 2. 在 pages 目录下创建 login 目录,在 login 目录下创建 login.wxml、login.wxss、login.js、login.json 四个文件。 3. 在 login.wxml 文件中添加以下代码: ``` <view class="container"> <view class="logo"></view> <form bindsubmit="login"> <view class="form-item"> <input type="text" placeholder="请输入账号" name="username" value="{{username}}" /> </view> <view class="form-item"> <input type="password" placeholder="请输入密码" name="password" value="{{password}}" /> </view> <button class="btn" type="submit">登录</button> </form> </view> ``` 4. 在 login.wxss 文件中添加以下代码: ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .logo { width: 50px; height: 50px; background-color: #000; border-radius: 50%; margin-bottom: 30px; } .form-item { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; width: 100%; max-width: 300px; border-bottom: 1px solid #eee; } input { width: 100%; height: 30px; border: none; outline: none; } button { width: 100%; max-width: 300px; height: 40px; background-color: #000; color: #fff; border: none; border-radius: 20px; outline: none; } ``` 5. 在 login.js 文件中添加以下代码: ``` Page({ data: { username: '', password: '' }, login: function(event) { var username = event.detail.value.username; var password = event.detail.value.password; // TODO: 发送登录请求 } }) ``` 6. 在 login.json 文件中添加以下代码: ``` { "navigationBarTitleText": "登录" } ``` 7. 至此,微信小程序登录页面代码实现完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值