开始

Todos 案例

分析

页面布局

功能分析

点击+号添加一条任务清单
点击任务清单可以切换状态
点击x号删除这一条任务清单
1 item left跟随着变化三种状态
当任务清单只有一条时，为1 item left
当任务清单为0时，为空（消失）
当任务清单为>1时，为 x items left
Toggle all 表示全选和全不选
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;
}

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) returnvar todos = this.data.todostodos.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然后冒泡到itemremoveTodos: 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.allcompletedvar that = this// 找到数组var todos = this.data.todostodos.forEach(function (item) {item.completed = that.data.allcompleted})var leftCount = this.data.allcompleted ? 0 : this.data.todos.lengththis.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 })}
})

业务逻辑

三元运算符
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>

添加事件
!this.data.search 如果search为空 return （文本框里面没东西点击加号没反应）
todos.push一个新数组添加任务清单名字和状态通过，setData({})方法显示并且x item 中x+1

 //判断如果input为空不生成addTodosHandel: function (e) {if (!this.data.search) returnvar todos = this.data.todostodos.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然后冒泡到itemremoveTodos: 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.allcompletedvar that = this// 找到数组var todos = this.data.todostodos.forEach(function (item) {item.completed = that.data.allcompleted})var leftCount = this.data.allcompleted ? 0 : this.data.todos.lengththis.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操作。

微信小程序--Todos案例相关推荐

微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函涉及内容:地图目录结构: pages\index\index.wxml <view class="box"><view clas ...
微信小程序实验案例：简易成语小词典
微信小程序实验案例:简易成语小词典 01.准备工作 1●申请数据接口现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例. 首先访问聚合数据官网https:// ...
axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...
微信小程序经典案例开发(微信开发)
课程介绍: 非常值得推荐的一套微信小程序开发视频教程,来自极客学院全套的微信实战开发程序,值得学习 -------------------课程目录------------------- ├<; ...
2018最新微信小程序经典案例开发视频教程合集
课程介绍: 非常值得推荐的一套微信小程序开发视频教程,来自极客学院全套的微信实战开发程序,值得学习 -------------------课程目录------------------- ├<; ...
微信小程序开发案例2---省市区信息选择
在之前的案例1中小编教授了大家如何做一个微信小程序版的简易计算器,并实现其相应功能,同样这次小编将延续案例一中的风格,继续非常详细的一步一步的带小伙伴们亲手调试和开发编程. 下面我将教大家如何开发自己 ...
【微信小程序】案例 - 本地生活
效果: 目录首页效果以及实现步骤 ① 新建项目并梳理项目结构 ② 配置导航栏效果 ③ 配置 tabBar 效果 ④ 实现轮播图九宫格效果首页效果以及实现步骤 ① 新建项目并梳理项目结构 &qu ...
微信小程序开发案例分享-必背诗：从0到1，从前端到数据库
序大概在2018年8月份,突发的一个想法就是接触下微信小程序来练练手,虽说这个时间点微信小程序已经很火了,但想想古人说的话:"整就中咧,干就完啦".所以还是坚持走一遍,建一个自己 ...
手把手教你进行微信小程序开发案例1---计算器
由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和注册账号,不懂的小伙伴们可以观看我之前发过的教程哦. #####下面我将 ...
记录一下爬取微信小程序失败案例，fiddler抓包
记一次失败的操作,想把一个微信小程序(美团外卖小程序)的数据爬下来,在模拟登陆的时候需要需要post,经过反复查看,找到了post参数,请求头等,不过用postman测试却提前错误,说是不安全的请求, ...

微信小程序--Todos案例

开始

Todos 案例

分析

开始制作页面

代码

业务逻辑

总结

微信小程序--Todos案例相关推荐

最新文章

热门文章