初学微信小程序 TodoList

2020-04-29 14:07:03 阅读：331 来源： 互联网

微信小程序的学习

微信小程序的开始尝试 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框架就做好了

标签：log,wxml,TodoList,微信,js,初学,wxss
来源： https://www.cnblogs.com/10manongit/p/12801763.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9