初学微信小程序 TodoList
微信小程序的學(xué)習(xí)
微信小程序的開始嘗試 TodoList
微信開發(fā)者工具生成 目錄如下:
. |-- 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大體為:
每一個(gè)page即是一個(gè)頁面文件 ,每個(gè)頁面有一個(gè)js/wxml/wxss/json文件 規(guī)定:描述頁面的這四個(gè)文件必須具有相同的路徑與文件名。
全局下同路,為公共的邏輯,樣式,配置
與html不同:用view text navigator 代替 div span a
官方文檔
*.wxml: 數(shù)據(jù)驅(qū)動(dòng)的視圖層 + 微信提供了大量的組件 表單 導(dǎo)航 媒體 ...
好,那現(xiàn)在正式嘗試TodoList~
開始完成wxml ,我在這里主要分成三部分
1.titleBar
</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="請(qǐng)輸入任務(wù)" 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 是一個(gè)模板 {{數(shù)據(jù)狀態(tài)}} 數(shù)據(jù)的綁定
動(dòng)態(tài)的 可編譯的 活的 data 是活的 setData 只要狀態(tài)一變 界面立即改變 我們?cè)谶@里使用了data 來表示數(shù)據(jù)屬性寫完了wxml 那讓我們加上wxss樣式看看效果把
TodoList wxss
在wxss中我們使用了彈性布局flex:1, 這種布局的方式使得我們不用計(jì)算大小了
我們當(dāng)然不能只做一個(gè)切圖仔啦
話不多說看看js的實(shí)現(xiàn)部分
數(shù)據(jù) 對(duì)應(yīng)著 界面狀態(tài)
默認(rèn)的status是1是全部setData改變 比如改成2 setData 2 已完成 3 未完成界面狀態(tài),全部被data接管起來
當(dāng)前點(diǎn)擊條目的status要變成 success 數(shù)據(jù) lists 跟當(dāng)前條目相關(guān)的數(shù)據(jù)
將status的值 更新為 1
這樣一個(gè)簡單的TodoList框架就做好了
總結(jié)
以上是生活随笔為你收集整理的初学微信小程序 TodoList的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 自己收藏的前端网站
- 下一篇: winRAR 没有右键选项