微信小程序--Todos案例

最新推荐文章于 2022-10-27 17:23:49 发布
最新推荐文章于 2022-10-27 17:23:49 发布
阅读量743 收藏 6
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jy123_/article/details/104058845
版权

开始

Todos 案例

分析

页面布局
效果图
功能分析

  1. 点击+号添加一条任务清单
  2. 点击任务清单可以切换状态
  3. 点击x号删除这一条任务清单
  4. 1 item left跟随着变化三种状态
    当任务清单只有一条时，为1 item left
    当任务清单为0时，为空（消失）
    当任务清单为>1时，为 x items left
  5. Toggle all 表示全选和全不选
  6. clear completed 表示清除所有已完成的任务清单

开始制作页面

改变navigationBarTextStyle值
页面布局图
在这里插入图片描述

代码

wxml

<view class="container">
    <view class="search">
        <image src="../../images/plus.png" bindtap="addTodosHandel"></image>
        <input type="text" placeholder="Anything here..." 
        value="{{  search  }}"
         bindinput="inputChangeHandel"
         bindconfirm="addTodosHandel"
         />
    </view>
    <block wx:if="{{todos.length}}">
    <view class="todos">
        <view class="item {{item.completed ? 'completed' : ''}}" wx:for="{{  todos  }}" wx:key="{{index}}" bindtap="toggleTodos" data-index="{{index}}">
            <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
            <text>{{ item.names }}</text>
            <icon type="clear" size="16" catch:tap="removeTodos" data-index="{{index}}"></icon>
        </view>
    </view>
    <view class="footer">
        <text bindtap="toggleAllHandel">Toggle all</text>
        <!-- {{}} 里面只要有字符就是为true  if判断如果为true时，就显示出来 -->
        <text wx:if="{{leftCount}}">{{ leftCount }} {{leftCount > 1 ? 'items':'item'}} left</text>
        <text bind:tap="clearHandel">Clear completed</text>
    </view>
    </block>
    <view wx:else>
        <text >null</text>
    </view>
</view>

wxss

/* pages/todos/todos.wxss */
.container{
    border-top: 1rpx solid #000;
}

.search{
    /* align-items:center  侧轴对齐*/
    display: flex;
    align-items: center;
    border: 1rpx solid #e0e0e0;
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;  
}

.search image{
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}

.todos{
    margin: 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 5rpx;
    box-shadow: 0 0 5rpx #e0e0e0;   
}

.todos .item{
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #e0e0e0;
}

.todos .item:last-child{
    border-bottom: 0;
}

.todos .item text{
   flex: 1;
   font-size: 30rpx;
   color: #888;
   margin-left: 20rpx;
}

.todos .item.completed text{
  color: #888;
  /* 中划线 */
  text-decoration: line-through;
 }

.footer{
    display: flex;
    justify-content: space-between;
    margin: 20rpx;
    font-size: 30rpx;
    color: #333;
}

js

Page({
  data: {
    // 文本框
    search: '',
    // 任务列表
    todos: [
      { names: 'learning WEAPP', completed: false },
      { names: 'learning HTML', completed: true },
      { names: 'learning CSS', completed: false }
    ],
    leftCount: 2,
    allcompleted: false
  },
  inputChangeHandel: function (e) {
    this.setData({ search: e.detail.value });
  },
  // 事件处理函数

  //判断如果input为空不生成
  addTodosHandel: function (e) {
    if (!this.data.search) return
    var todos = this.data.todos
    todos.push({
      names: this.data.search,
      completed: false
    })
    // 必须显示的通过setData()
    this.setData({
      todos: todos,
      input: '',
      leftCount: this.data.leftCount + 1
    })
  },
  // 1.先让按钮点击时执行一段代码
  // 2.拿到文本框里面的值
  // 2.1. 由于小程序的数据绑定是单向的，必须要给文本注册改变事件 
  // 3.将这个值添加到列表中

  //切换任务
  toggleTodos: function (e) {
    // 切换当前点中的完成状态
    // console.log(e.currentTarget)
    var item = this.data.todos[e.currentTarget.dataset.index]
    item.completed = !item.completed
    // 根据当前任务状态的完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },
  // 删除任务(需要注意冒泡)  点击删除按钮会执行切换任务事件函数    点击x然后冒泡到item
  removeTodos: function (e) {
    // 找到数组
    var todos = this.data.todos
    // item 就是splice方法中移除掉的元素
    var remove = todos.splice(e.currentTarget.dataset.index, 1)[0]
    var leftCount = this.data.leftCount - (remove.completed  ?  0 : 1)

    // 找到要删除数组的下标
    
    // todos 中会移除掉index所指向的元素
    this.setData({ todos: todos, leftCount: leftCount })
  },
  //处理任务列表全部点击
  toggleAllHandel: function (e) {
    // this 在这里永远指向的是当前页面对象
    this.data.allcompleted = !this.data.allcompleted
    var that = this
    // 找到数组
    var todos = this.data.todos
    todos.forEach(function (item) {
      item.completed = that.data.allcompleted
    })
    var leftCount = this.data.allcompleted ? 0 : this.data.todos.length
    this.setData({ todos: todos, leftCount: leftCount })
  },
  // 清空所有列表
  clearHandel() {
    //  console.log('111')
    // var todos=[]
    // this.data.todos.forEach(function (item){
    //   if(!item.completed){
    //     todos.push(item)
    //   }
    // })
    // 过滤方法就是当(过滤逻辑)为真的时候将他们移到一个数组
    var todos = this.data.todos.filter(function (item) {
      return !item.completed
    })
    this.setData({ todos: todos })
  }
})

业务逻辑

  1. 三元运算符
    item加了一个class属性如果completed为真就添加这个属性否则就不添加
    icon 如果item.completed为真就type改为success否则circle
<view class="item {{item.completed ? 'completed' : ''}}" wx:for="{{  todos  }}" wx:key="{{index}}" bindtap="toggleTodos" data-index="{{index}}">
            <icon type="{{item.completed ? 'success' : 'circle'}}"></icon>
  1. 添加事件
    !this.data.search 如果search为空 return （文本框里面没东西点击加号没反应）
    todos.push一个新数组添加任务清单名字和状态通过，setData({})方法显示并且x item 中x+1
 //判断如果input为空不生成
  addTodosHandel: function (e) {
    if (!this.data.search) return
    var todos = this.data.todos
    todos.push({
      names: this.data.search,
      completed: false
    })
    // 必须显示的通过setData()
    this.setData({
      todos: todos,
      input: '',
      leftCount: this.data.leftCount + 1
    })
  },

bindinput函数事件
数据绑定 e.detail.value

 inputChangeHandel: function (e) {
    this.setData({ search: e.detail.value });
  },

切换任务
item是当前点击数据的index
将状态值改为false
item.completed=!item.completed
三元运算符如果为false就-1否则就+1

  //切换任务
  toggleTodos: function (e) {
    // 切换当前点中的完成状态
    // console.log(e.currentTarget)
    var item = this.data.todos[e.currentTarget.dataset.index]
    item.completed = !item.completed
    // 根据当前任务状态的完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    this.setData({
      todos: this.data.todos,
      leftCount: leftCount
    })
  },

删除任务
点击删除号，点击删除号触发冒泡item事件 用catchtap事件
用splice移除选中的元素
用e.currentTarget.dataset.index是添加了一个index属性要在wxml写data-index=”{{index}}“ 传参数

// 删除任务(需要注意冒泡)  点击删除按钮会执行切换任务事件函数    点击x然后冒泡到item
  removeTodos: function (e) {
    // 找到数组
    var todos = this.data.todos
    // item 就是splice方法中移除掉的元素
    var remove = todos.splice(e.currentTarget.dataset.index, 1)[0]
    var leftCount = this.data.leftCount - (remove.completed  ?  0 : 1)

    // 找到要删除数组的下标
    
    // todos 中会移除掉index所指向的元素
    this.setData({ todos: todos, leftCount: leftCount })
  },

全选和全不选
小程序的this永远指向当前页面对象
forEach遍历数组

 //处理任务列表全部点击
  toggleAllHandel: function (e) {
    // this 在这里永远指向的是当前页面对象
    this.data.allcompleted = !this.data.allcompleted
    var that = this
    // 找到数组
    var todos = this.data.todos
    todos.forEach(function (item) {
      item.completed = that.data.allcompleted
    })
    var leftCount = this.data.allcompleted ? 0 : this.data.todos.length
    this.setData({ todos: todos, leftCount: leftCount })
  },

清空所有数组
返回为false状态的任务清单

 // 清空所有列表
  clearHandel() {
    //  console.log('111')
    // var todos=[]
    // this.data.todos.forEach(function (item){
    //   if(!item.completed){
    //     todos.push(item)
    //   }
    // })
    // 过滤方法就是当(过滤逻辑)为真的时候将他们移到一个数组
    var todos = this.data.todos.filter(function (item) {
      return !item.completed
    })
    this.setData({ todos: todos })
  }
总结

深刻了解到微信小程序的数据绑定机制、业务逻辑和不用DOM和BOM操作。

触不可及的Allen
关注
专栏目录
微信小程序云开发实例演示
jekc2008的专栏
08-28 742
新手开发自己的APP，一个月的时间，前期准备，操作流程和遇到的问题，给大家成为有经验的开发者提供帮助！ 整个事务流程：开始-创建-修复-完善
小白学习微信小程序的云开发和云函数使用
最新发布
m0_72166538的博客
04-29 484
云开发允许开发者在小程序中直接使用云端数据库、云存储、云函数等功能，无需搭建和维护服务器，让小白也能轻松实现数据的存储和处理。在小程序开发者工具的云开发控制台中，点击左侧的“云函数”选项卡，再点击右上角的“新建云函数”按钮，即可创建一个新的云函数。云开发的云存储功能可以用于存储和管理小程序中的文件，例如用户上传的图片、视频等。云函数是在云端运行的函数，可以用于实现对敏感数据的保护和复杂计算的处理。首先，我们需要在小程序的页面中引入云开发的云存储模块。首先，我们需要在小程序的页面中引入云开发的云函数模块。
微信小程序实现todos功能wxAppTodos-master.zip
09-25
微信小程序实现todos功能wxAppTodos-master.zip
微信小程序入门之构建一个简单TODOS应用
weixin_34198797的博客
03-10 279
最近，由于工作需要开始了解微信小程序，虽然小程序已经出了很久了，刚出的那段时间很火，看到很多关于小程序的技术文章，不过现在似乎没那么火了，anyway，我们还是可以学习下的。 一、了解微信小程序 1.理念：小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。2.框架：框架的核心是一个响应的...
一个简单todos的例子
m0_45272038的博客
02-13 836
文章目录效果图代码 效果图 代码 主要代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link r
一个简单微信小程序TODOS应用
08-10
一个简单微信小程序TODOS应用
todos案例练习
weixin_47169270的博客
08-15 988
todos案例 1 提供的数据和 HTML结构 引入todos的CSS样式 （HTML和 CSS 已经写好 我们需要改成Vue动态渲染的） 2 把数据渲染到页面上 根据completeed 的状态动态给li 绑定类名 未完成状态：不需要样式 完成状态： 类名为 completed 编辑状态：类名为 editing 如果completed 为 true 则给当前li 添加 completed input type=“checkbox"中绑定v-model时=的参数为唯
微信小程序-使用TypeScript开发微信小程序
08-06
使用微信web开发者工具新建一个小程序项目，项目目录选择dist目录，该目录是ts源文件编译后存放的目录。 开发 $ git clone git@github.com:linguofeng/wxapp-typescript.git $ cd wxapp-typescript $ npm install -g...
微信小程序源码案例大全
尚拙的博客
04-30 2280
微信小程序源码案例大全 微信小程序demo：足球，赛事分析 小程序简易导航 小程序demo：办公审批 小程序Demo：电魔方 小程序demo：借阅伴侣 微信小程序demo：投票 微信小程序demo：健康生活 小程序demo：文章列表demo 微商城（含微信小程序）完整源码+配置指南 微信小程序Demo：一个简单的工作系统 微信...
todos.微信小程序开发
duanyuehuan
06-16 215
微信小程序
Vue实现简单ToDolist案例
Huang_DW的博客
07-01 467
Vue实现简单ToDolist案例 <template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&
TODOS案例
Yous的博客
08-16 831
TodoHead.vue 输入框 --键盘事件—回车。子传父 把任务 —App.vue中 加入到数组中。1：创建3个组件和里面的代码还有样式。数组改变，所有用到数组的地方都会更新。点击全选 —小选框状态和全选状态一样。小选框都选中(手选)—全选会自动选中。2：APP.vue中引入三个组件。输入框为空，提示用户必须输入内容。点击清空按钮，把已完成的任务清空。点击底部切换，点谁谁有边框样式。对应切换不同的数据展示。哪天需要了，可以去下载。页面刷新后数据还存在。...
Vue - Todos 案例
weixin_62897746的博客
10-27 1368
vue 实现 todos 具体代码思路和代码 给 input 框绑定回车事件，回车后把数据请求到 vuex 中 把数据保存至本地存储中 给下拉箭头绑定点击事件，点击则给所有多选框进行反选 判断是否选中，如果选中则禁用 给数组进行过滤，然后渲染至页面中 双击 input 框 则允许改变样式，平时则禁止改变
Todolist 案例
susu100600的博客
12-24 342
refs写法： // 引入react import React from 'react'; // 创建一个Todolist类 class Todolist extends React.Component{ // 构造方法 constructor(){ super() // 实例化一个值 this.state={ ...
Todos案例（一）——业务分析 & 基本布局
weixin_44867717的博客
06-12 1088
Todos案例——业务分析 & 基本布局 业务分析 todos 页面模板 下载项目压缩包后，使用时，需要先安装依赖包 todomvc-common/base.css todomvc-app-css/index.css npm install yarn intall 1、直接打开index.html 2、本地启动打开 实现基本布局 安装依赖包 修改模板的相关标签结构，从而符合JSX语法 yarn add todomvc-common todomvc-app-css 导
todolist小案例
qq_37169559的博客
11-06 225
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>自己写一个</title> <style> .head1{ ...
微信小程序学习笔记(5) -- todos案例
baidu_21349635的专栏
06-27 622
文章目录TODOS案例:项目介绍样式书写导航栏todosfooter数据绑定抽象数据模型界面数据绑定界面交互操作新增新增逻辑优化切换任务完成状态剩余任务数量展示删除任务逻辑切换全部任务状态(全选)清空已完成任务细节优化和总结bindconfirm事件呈现问题--block真机演示 TODOS案例: 项目介绍 https://github.com/zce/weapp-todos 样式书写 导航栏 效果： 具体代码: <view class="search"> <image s
自学微信小程序开发第六天- TODOS案例
runsong911的博客
05-15 288
自学微信小程序开发第六天- TODOS案例
Redux 例子分析： 从 UI 角度解析 todos
博客已退休
02-02 560
在 Redux 例子分析： todos 中，我从代码的角度来说明 todos 这个例子是怎样实现的。如果很了解redux，一目了然，但是如果不太熟悉，那么就觉得有些难度了。如果能从UI的角度来逐步分析，应该会更加直接。 运行 todos，做出如下效果： 实现Todo 列表 单条记录 Todo 先来分析一下 list 中的这两项，即 hello 和 goodbye。想要在浏览器里
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值