阅读 38

初学微信小程序 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

全部 未完成 已完成

2/scoll-view scroll-y class="lists"

    
        
{{item.title}} {{item.time}}

3/addForm

    
        
        
            
            
        
    


wxml 是一个模板 {{数据状态}} 数据的绑定

    动态的 可编译的 活的  data 是活的 setData  只要状态一变 界面立即改变  
    我们在这里使用了data 来表示数据属性

写完了wxml 那让我们加上wxss样式看看效果把



在wxss中我们使用了弹性布局flex:1, 这种布局的方式使得我们不用计算大小了

我们当然不能只做一个切图仔啦


话不多说

数据 对应着 界面状态

 默认的status是1是全部
 setData改变 比如改成2 setData 2 已完成 3 未完成

界面状态,全部被data接管起来
当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据
将status的值 更新为 1


这样一个简单的TodoList框架就做好了

原文:https://www.cnblogs.com/10manongit/p/12801763.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐