无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
秀杰實(shí)戰(zhàn)教程系列《一》:記賬應(yīng)用開發(fā)
時(shí)間:2016-10-18 11:08:00
通過閱讀本課程你可以學(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è)添加按鈕

    
  1. <!--index.wxml-->
  2. <view class="container">
  3. <navigator url="../item/item" hover-class="navigator-hover">添加收支</navigator>
  4. </view>
1.2 設(shè)置按鈕按下高亮樣式hover-class

  1. /**index.wxss**/
  2. /** 修改默認(rèn)的navigator點(diǎn)擊態(tài) **/
  3. .navigator-hover {
  4. color:#2297f1;
  5. }
2. 添加頁面布局

依次新建一個(gè)item文件夾,item.wxml item.wxss item.js item.json

如圖2-2-1

修改app.json

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/item/item"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#2297f1",
  9. "navigationBarTitleText": "靈犀賬本",
  10. "navigationBarTextStyle":"white"
  11. }
  12. }
item.wxml

  1. <!--item.wxml-->
  2. <view class="page">
  3. <view class="section">
  4. <view class="section__title">標(biāo)題</view>
  5. <input bindinput="bindTitleInput" placeholder="內(nèi)容" value="{{title}}" />
  6. </view>
  7. <view class="section">
  8. <view class="section__title">類型</view>
  9. <radio-group class="radio-group" bindchange="radioChange">
  10. <label class="radio">
  11. <radio class="radio" value="income" checked="true"/>收入
  12. </label>
  13. <label class="radio">
  14. <radio class="radio" value="cost"/>支出
  15. </label>
  16. </radio-group>
  17. </view>
  18. <view class="section">
  19. <view class="section__title">金額</view>
  20. <input bindinput="bindAccountInput" type="number" placeholder="請(qǐng)輸入數(shù)字,不加正負(fù)號(hào)"/>
  21. </view>
  22. <button class="button" type="primary">添加</button>
  23. </view>
item.wxss

  1. .page {
  2. min-height: 100%;
  3. flex: 1;
  4. background-color: #FBF9FE;
  5. font-size: 32rpx;
  6. font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  7. overflow: hidden;
  8. }
  9. .page input{
  10. padding: 20rpx 30rpx;
  11. background-color: #fff;
  12. }
  13. .section{
  14. margin:40rpx 0;
  15. }
  16. .section_gap{
  17. padding: 0 30rpx;
  18. }
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358