小程序模板网

制作todo list微信小程序

2018-08-29 白朱砂

今天给大家分享如何制作todo list微信小程序。

资源

  • 视频 - BiliBili,
    制作ToDo List微信小程序
    http://v.youku.com/v_show/id_XMzc5NjgwMDM5Ng==.html
    , YouTube
  • 源码地址 - https://github.com/JKooll/sha...

工具

  • 微信开发者工具 v1.02
  • 微信小程序框架文档
  • weui for 小程序 基础样式库

过程

打开微信开发工具,创建新项目

 

导入weui for 小程序 基础样式库

  1. 下载weui for 小程序源码
  2. 在项目中创建目录src/wxss/
  3. 复制dist/style/weui.wxss文件到项目src/wxss/目录下

 

在全局引入weui基础样式库

  1. 打开app.wxss文件
  2. 添加代码到开头
@import './src/wxss/weui.wxss';

 

创建todo页面

  1. 打开app.json
  2. 在pages数组第一行中添加pages/todo/todo,保存文件

 

添加tasks数据

  1. 打开pages/todo/todo.js
  2. 在data对象中添加tasks数据

 

tasks每个元素包含三个字段:

  • content: 内容
  • key: 键
  • status: true - 完成状态, false - 未完成状态

渲染tasks列表

  1. 打开pages/todo/todo.wxml
  2. 清空文件
  3. 添加如下代码到文件, 保存文件
<view class="page">

  <view class="page__bd">

    <view class="weui-cell">
      <view class="weui-cell__bd">
        <input class="weui-input" placeholder="添加新任务"/>
      </view>

      <view class="weui-cell__ft">
        <button class="weui-btn" type="primary">添加</button>
      </view>
    </view>

    <view class="weui-cells__title">待办事项</view>
    <view class="weui-cells weui-cells__after-title">
      <radio-group>

        <block wx:for="{{tasks}}" wx:key="value" wx:if="{{!item.status}}">
          <label class="weui-cell weui-check__label">
            <radio class="weui-check" value="{{item.value}}"></radio>

            <view class="weui-cell__hd weui-check__hd_in-checkbox">
              <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
            </view>
            <view class="weui-cell__bd">{{item.content}}</view>

            <view class="weui-cell__ft"><button class="weui-btn" type="warn">删除</button></view>
          </label>
        </block>
        
      </radio-group>
    </view>

    <view class="weui-cells__title">完成事项</view>
    <view class="weui-cells weui-cells__after-title">
      <radio-group>

        <block wx:for="{{tasks}}" wx:key="value" wx:if="{{item.status}}">
          <label class="weui-cell weui-check__label">
            <radio class="weui-check" value="{{item.value}}"></radio>

            <view class="weui-cell__hd weui-check__hd_in-checkbox">
              <icon class="weui-icon-checkbox_success" type="success" size="23"></icon>
            </view>

            <view class="weui-cell__bd">{{item.content}}</view>

            <view class="weui-cell__ft"><button class="weui-btn" type="warn">删除</button></view>
          </label>
        </block>
        
      </radio-group>
    </view>
    
  </view>

</view>

 

改变task状态

  1. 打开pages/todo/todo.wxml
  2. 待办事项和完成事项下的label更改为<label class="weui-cell weui-check__label" data-value="{{item.value}}" bindtap="changeTaskStatus">

    • bindtap="changeTaskStatus" 绑定点击事件
    • data-value="{{item.value}}" 将task的value值传递给changeTaskStatus函数
  3. 打开pages/todo/todo.js, 添加changeTaskStatus, 保存文件查看效果
changeTaskStatus: function (e) {
    let value = e.currentTarget.dataset.value;

    let tasks = this.data.tasks;

    let index = tasks.findIndex(task => task.value == value);

    if (index < 0) {
      return;
    }

    tasks[index].status = !tasks[index].status;

    this.setData({
      tasks: tasks
    });
  }

 

删除task

  1. 打开pages/todo/todo.wxml
  2. 待办事项和完成事项下的button更改为button class="weui-btn" type="warn" data-value="{{item.value}}" catchtap="removeTask">删除</button>

    • catchtap="removeTask" 绑定点击事件,和bindtap区别在于它阻止事件冒泡 【更多】
    • data-value="{{item.value}}" 将task的value值传递给removeTask函数
  3. 打开pages/todo/todo.js, 添加removeTask函数, 保存文件查看效果

 

添加task

创建task

  1. 打开pages/todo/todo.wxml
  2. 将添加新任务下的input更改为<input class="weui-input" placeholder="添加新任务" bindinput="typeNewTask" value="{{newTask}}"/>

    • bindinput="typeNewTask" 绑定input事件
    • value="{{newTask}}" 绑定newTask到input valu,可以用来初始化input中的内容
  3. 打开pages/todo/todo.js
  4. 在data对象中添加两个新的变量, newTask: '', key: ''

    • newTask 保存新的task的内容
    • key 保存下一个task value值
  5. 添加typeNewTask,更新newTask变量的值
typeNewTask: function(e) {
    this.setData({
      newTask: e.detail.value.trim()
    });
  },

保存task

  1. 打开pages/todo/todo.wxml
  2. 将添加新任务下的button更改为<button class="weui-btn" type="primary" bindtap="addTask" disabled="{{newTask == ''}}">添加</button>

    • bindtap="addTask" 绑定点击事件
    • disabled="{{newTask == ''}}" 当newTask为空时,禁用button
  3. 打开pages/todo/todo.js
  4. 清空data中tasks变量的内容, tasks: []
  5. 添加addTask函数,保存文件查看效果
addTask: function () {
    let tasks = this.data.tasks;
    let key = this.data.key;

    let newTaskObj = { content: this.data.newTask, value: key++, status: false };
    tasks.push(newTaskObj);

    this.setData({
      tasks: tasks,
      key: key,
      newTask: ''
    });
  },

完成

 

 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24737.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询