• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序家庭记账本开发进度七

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

index.json

{
"usingComponents": {}
}
index.wxml
<!--index.wxml-->
<view class="container">

<form catchsubmit="formSubmit" >
<view class="account-detail">
<input placeholder="账目详情" name="inputdetail" type="text" />
</view>

<view class="account-amount">
<input placeholder="账目数额" name="inputamount" type="number" />
</view>
 
<view class="add-one">
<button formType="submit" type="primary" loading="{{buttonLoading}}"> 记一笔 </button>
</view>
</form>

<view class="account-list-text">
<text>账单列表:</text>
</view>

<view class="account-list-all-amount">
<text>合计:{{accountTotal}}</text>
</view>
 
<block wx:for="{{accountData}}" >
<view class="account-list">
<view class="account-list-detail">
{{item.detail}}
</view>

<view class="account-list-amount">
{{item.amount}}
</view>

<view class="account-list-del">
<button size="mini" type="warn" data-index-key="{{index}}" bindtap="deleteRow" >删除</button>
</view>

</view>
</block>
来编译对添加和删除账单代码
index.wxss
.account-detail{
height: 100rpx;
padding: 0 30rpx;
}

.account-amount{
padding: 0 30rpx;
}

.add-one{
margin-top: 20rpx;
}

.account-list-text{
color:gray;
margin:30rpx 0 0 30rpx;
}

.account-list-all-amount{
color:gray;
align-self: flex-end;
padding-right: 25rpx;
}


.account-list{
color:gray;
margin:30rpx 0 0 30rpx;
display: flex;
flex-direction: row;
">rgba(12, 233, 141, 0);
line-height: 70rpx;
}


.account-list-detail{
flex:1;
}


.account-list-amount{
width: 100rpx;
}来提供了全局的样式和局部样式。
logs.js
//logs.js
const util = require(\'../../utils/util.js\')

Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync(\'logs\') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
logs.json
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}  
logs.wxml
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
logs.wxss
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}

 

这个很单调很简单,是从网上找的,还得学习,改编一下,让功能更加完善。



 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序--家庭记账本开发--01发布时间:2022-07-18
下一篇:
封装微信小程序支付发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap