秀杰实战教程系列《一》：记账应用开发

秀杰实战教程系列《一》：记账应用开发时间：2016-10-18 11:08:00 通过阅读本课程你可以学到以下知识：1.使用表单组件、表单验证、Alert警告框2.实现列表页并重写单元格3.保存与读取数据到本地4.页面跳转先看一上效果图图0-11.2 设置按钮按下高亮样式hover-class

/**index.wxss**//** 修改默认的navigator点击态 **/.navigator-hover { color:#2297f1;}

2. 添加页面布局依次新建一个item文件夹，item.wxml item.wxss item.js item.json如图2-2-1item.wxml

<!--item.wxml--><view class="page"> <view class="section">  <view class="section__title">标题</view>  <input bindinput="bindTitleInput" placeholder="内容" 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="请输入数字，不加正负号"/> </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;}


	

	声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。