初学微信小程序 TodoList
微信小程序的学习
微信小程序的开始尝试 TodoList
微信开发者工具生成 目录如下:
.
|-- app.js
|-- app.json
|-- app.wxss
|-- pages
| |-- index # 主页
| | |-- index.js
| | |-- index.json
| | |-- index.wxml
| | `-- index.wxss
| `-- log # 日志页面
| | |-- log.js
| | |-- log.json
| | |-- log.wxml
| | `-- log.wxss
`-- utils # 工具`-- util.js
大体为:
每一个page即是一个页面文件 ,每个页面有一个js/wxml/wxss/json文件 规定:描述页面的这四个文件必须具有相同的路径与文件名。
全局下同路,为公共的逻辑,样式,配置
与html不同:用view text navigator
代替 div span a
官方文档
*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...
好,那现在正式尝试TodoList~
开始完成wxml ,我在这里主要分成三部分
1.titleBar
<view class="titleBar">
<div class="status"><!-- wxml 是一个模板 {{数据状态}} 数据的绑定
动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变 --><text class="{{status=='1'?'active':''}}" data-status="1" bindtap="showStatus">全部</text><!--用data- 表示数据属性--><text class="{{status=='2'?'active':''}}" data-status="2" bindtap="showStatus">未完成</text><text class="{{status=='3'?'active':''}}" data-status="3" bindtap="showStatus">已完成</text>
</div>
<div class="add"><button class="mini-btn" size="mini" type="warn" bindtap="addTodoShow">添加</button></div>
</view>
2/scoll-view scroll-y class="lists"
<scoll-view scroll-y class="lists">
<view class="item" wx:for="{{curLists}}" wx:key="index"><div class="content"><icon class="icon-small" bindtap="changeTodo" data-item="{{index}}" size="23" type="{{item.status ==='1'? 'success':'circle'}}"></icon><text class="title">{{item.title}}</text><text class="time">{{item.time}}</text></div></view>
</scoll-view>
3/addForm
<view class="addForm {{addShow?'hide':''}}">
<view class="addForm-div"><input type="text" placeholder="请输入任务" class="weui-input" bindinput="setInput" value="{{addText}}" /><view class="addForm-btn"><button type="warn" size="mini" class="weui-btn mini-btn" bindtap="addTodo">确定添加</button><button type="default" size="mini" class="weui-btn mini-btn" bindtap="addTodoHide">取消</button></view></view>
</view>
</view>
wxml 是一个模板 {{数据状态}} 数据的绑定
动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变 我们在这里使用了data 来表示数据属性
写完了wxml 那让我们加上wxss样式看看效果把
TodoList wxss
在wxss中我们使用了弹性布局flex:1, 这种布局的方式使得我们不用计算大小了
我们当然不能只做一个切图仔啦
话不多说看看js的实现部分
数据 对应着 界面状态
默认的status是1是全部setData改变 比如改成2 setData 2 已完成 3 未完成
界面状态,全部被data接管起来
当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据
将status的值 更新为 1
这样一个简单的TodoList框架就做好了
初学微信小程序 TodoList相关推荐
- 微信小程序 todolist
微信小程序todolist 的变种 文章目录 前言 一.效果图 二.代码 1.wxml 2.wxss 3.js 前言 微信小程序todolist 的变种 一.效果图 二.代码 1.wxml 代码如下: ...
- 微信小程序周报(第八期)
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟--微信小程序周报 每周一笑 客户被绑,蒙眼,惊问:"想干什么?"对方不语,鞭笞之,客户求饶 ...
- 微信小程序资料集(下)
**8月18日小程序Demo集合** [微信小程序Demo:股票分时图.K线图](简书) [微信小程序精品Demo:知乎日报](简书) [微信小程序Demo:事项助手(在日历上添加事件备注)](简书) ...
- 微信小程序的入门笔记(一)
[初学微信小程序] 一.微信小程序是什么? 小程序呢有很多种,微信小程序呢只是其中之一,英文名:Wechat Mini Program,它是一种不需要下载安装即可使用的应用,相对于vue开发呢微信小程 ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序多维数组筛选(以二维数组为例)
微信小程序多维数组筛选(以二维数组为例) 我们在遇到微信小程序进行筛选的时候,一般会使用到filter函数来进行筛选,但是有时候遇到多维数组怎么办呢? //例如这是我们的数组 arr: [{id: 1 ...
- 微信小程序--初学篇
目标:一个微信小程序+一篇软件测试管理的论文 之前我是没做过移动端的应用的,可能这也是一个机会??多一个技能好过没有吧(ps:强行还行,因为这跟我的研究方向完全没关系). 找了个小例子看了一下,主要就 ...
- 微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
- 玩Android微信小程序版
最近开始针对项目性全面学习了一点js,和同事一起用MUI写了个项目,就敢拿出来献丑,我也是diaodiao的.经过几十个工时业余时间*(最近两周有点忙,周期拖得有点长,本来计划五一之前发出来的),在仿 ...
最新文章
- JAVA_OA(八):springMVC对JDBC的操作小项目a
- ASP.NET中的AdRotator控件即广告控件的使用
- ICML 2020 | 基于连续动态系统学习更加灵活的位置编码
- 「Python」 ElementTree模块解析xml文件,建议小白阅读全文
- openkruise 缩容_Linus 本尊也来了!为什么 KubeCon 越来越火了?
- react 项目总结
- sql加上唯一索引后批量插入_MySQL当批量插入遇上唯一索引
- 88相似标准形09——JJordan-Chevalley分解、幂零矩阵与幂零变换、幂零矩阵的判别、中国剩余定理、可换线性变换的性质
- android怎么操作才会出现anr_博客笔记大汇总,Android优化总结篇
- 10的n次方 java_为大家一共一个10的n次方的算法
- 首旅如家新生活方式空间品牌--如咖啡正式落地
- ipad查看qq邮箱收件服务器,ipad邮件设置qq邮箱
- IPQ6000 OpenWrt编译
- SparkGraphX快速入门
- Linux下的酷我音乐盒(开源非官方)
- 交换机配置计算机mac地址吗,局域网管理,设置网络核心交换机,局域网电脑IP-MAC地址绑定...
- JS 函数的递归算法
- 品管七大手法-1检查表(转载)
- 基于灰狼算法优化的Elman神经网络数据预测
- unity的vr场景怎么做_Unity Editor VR告诉你,建立VR场景很简单