当前位置: 首页 > Web前端 > HTML5

新手微信小程序TodoList

时间:2023-04-05 15:26:30 HTML5

微信小程序学习微信小程序试用TodoList微信开发者工具生成目录如下:.|--app.js|--app.json|--app.wxss|--pages||--index#首页|||--索引.js|||--索引.json|||--索引.wxml||`--index.wxss|`--log#日志页|||--日志.js|||--日志.json|||--日志.wxml||`--log.wxss`--utils#Tools`--util.js大致是:每个页面是一个页面文件,每个页面都有一个js/wxml/wxss/json文件规定描述页面的四个文件必须有相同的路径和文件名。全局,同理,对于公有逻辑,样式,配置与html不同:使用viewtextnavigator代替divspan官方文档*.wxml:数据驱动视图层+微信提供大量组件形式的导航媒体。..good,现在正式试试TodoList~开始完成wxml,我这里主要分为三个部分1.titleBarAll未完成<文本类s="{{status=='3'?'active':''}}"data-status="3"bindtap="showStatus">已完成

添加
2/scoll-viewscroll-yclass="列表"{{item.title}}{{item.time}}
3/addForm确定添加取消wxml是一个模板{{datastate}}databindingdynamiccompilablelivedataislivesetData只要状态一改变,界面马上改变我们这里用data表示数据属性,写wxml然后我们加上wxss样式看效果。wxss中的TodoListwxss我们使用了灵活的布局flex:1,这种布局方式使得我们不需要去计算大小,当然不能只做一个切图。话不多说看看js的实现。部分数据对应接口状态。默认状态为1,表示setData全部变化,比如变为2。SetData2完成,3未完成。接口状态全部由数据接管。将当前item相关的数据的status的值更新为1,这样一个简单的TodoList框架就做好了