通過閱讀本課程你可以學(xué)到以下知識(shí):
1.使用表單組件、表單驗(yàn)證、Alert警告框
2.實(shí)現(xiàn)列表頁并重寫單元格
3.保存與讀取數(shù)據(jù)到本地
4.頁面跳轉(zhuǎn)
先看一上效果圖
圖0-1
圖0-2
輸入圖片說明
一、創(chuàng)建項(xiàng)目并勾上quickStart
如圖1-1
二、首頁
首頁包含一個(gè)添加收支按鈕與所有條目的列表
1. 首頁布局
1.1 增加一個(gè)添加按鈕
<!--index.wxml-->
<view class="container">
<navigator url="../item/item" hover-class="navigator-hover">添加收支</navigator>
</view>
1.2 設(shè)置按鈕按下高亮樣式hover-class
/**index.wxss**/
/** 修改默認(rèn)的navigator點(diǎn)擊態(tài) **/
.navigator-hover {
color:#2297f1;
}
2. 添加頁面布局
依次新建一個(gè)item文件夾,item.wxml item.wxss item.js item.json
如圖2-2-1
修改app.json
{
"pages":[
"pages/index/index",
"pages/item/item"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2297f1",
"navigationBarTitleText": "靈犀賬本",
"navigationBarTextStyle":"white"
}
}
item.wxml
<!--item.wxml-->
<view class="page">
<view class="section">
<view class="section__title">標(biāo)題</view>
<input bindinput="bindTitleInput" placeholder="內(nèi)容" value="{{title}}" />
</view>
<view class="section">
<view class="section__title">類型</view>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio">
<radio class="radio" value="income" checked="true"/>收入
</label>
<label class="radio">
<radio class="radio" value="cost"/>支出
</label>
</radio-group>
</view>
<view class="section">
<view class="section__title">金額</view>
<input bindinput="bindAccountInput" type="number" placeholder="請(qǐng)輸入數(shù)字,不加正負(fù)號(hào)"/>
</view>
<button class="button" type="primary">添加</button>
</view>
item.wxss
.page {
min-height: 100%;
flex: 1;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page input{
padding: 20rpx 30rpx;
background-color: #fff;
}
.section{
margin:40rpx 0;
}
.section_gap{
padding: 0 30rpx;
}
-