微信小程序项目实例——记账本

文章目录

微信小程序项目实例——记账本
一、项目展示
二、首页
三、效果图
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

这是一款简易的记账本小程序
用户可以记录自己平日里的借入和借出的金额
此外可以手动删除记录（右滑记录）

二、首页

首页划分为资产金额和资产记录两部分组成

相关代码如下：

<import src="list/list.wxml" />
<view class="container"><view class="total"><view class="total-money">￥{{totalMoney}}</view><span class="total-word">总资产</span> <view class="total-list"><view id="totalOut" class="total-out" catchtap="onDetailTap"><view class="total-out-money">-￥{{outMoney}}</view><view class="total-out-number">借出{{outNumber}}笔</view></view><span class=" shuxian"></span> <view id="totalIn" class="total-in" catchtap="onDetailTap"><view class="total-in-money">+￥{{inMoney}}</view><view class="total-in-number">借入{{inNumber}}笔</view></view></view></view><view class="add" catchtap="onEditTap"><view class="image"></view>记一笔</view><view class="show "><span wx:if="{{detailInfo}}">空空如也，快去记上一笔吧</span> <view class="list-container" wx:else><block wx:for="{{data}}" wx:for-item="item" wx:for-index="index"><view class="outter"><view class="list" catchtouchstart="onTouchStart" catchtouchend="onTouchEnd" catchtouchmove="onTouchMove" style="right:{{item.slideX}}" data-listId="{{index}}"><view class="list-people ">{{item.inputPeople}}</view><view class="list-info ">{{item.inputInfo}}</view><view class="list-money-date "><view class="list-money colorRed" wx:if="{{item.radioGroup=='-'?true:false}}">{{item.radioGroup+"￥ "+item.inputMoney}}</view><view class="list-money colorGreen" wx:else>{{item.radioGroup+"￥ "+item.inputMoney}}</view><view class="list-date ">{{"["+item.date+"]"}}</view></view></view><view class="delete" catchtap="onDeleteTap" data-deleteId="{{index}}"><text class="delete-text ">删除</text></view></view></block></view></view>
</view>

var util = require("../../utils/util.js")
Page({data: {detailInfo: true,data: "",totalMoney: 0,outMoney: 0,outNumber: 0,inMoney: 0,inNumber: 0,detailOut: 'out',detailIn: 'in',startX: 0,moveX: 0,endX: 0,slideX: 0,},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},onEditTap: function () {wx.navigateTo({url: 'edit/edit'})},onDetailTap: function (ev) {var idName = ev.currentTarget.id;wx.navigateTo({url: 'detail/detail?idName=' + idName})},onReady: function () {// 页面渲染完成},onShow: function () {// 页面显示this.dataShow();this.count();util.setListStatus; //list列表删除按钮close},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭},dataShow: function () {var value = wx.getStorageSync('key'); //用不了异步if (value == "") {this.setData({detailInfo: true})} else {this.setData({detailInfo: false,data: value})}},count: function () {console.log("开始计算")console.log(this.data)var totalMoney = 0, outMoney = 0, outNumber = 0, inMoney = 0, inNumber = 0;var data = this.data.data;for (var i = 0; i < data.length; i++) {if (data[i].radioGroup == "-") {outNumber++;outMoney += parseFloat(data[i].inputMoney);} else {inNumber++;inMoney += parseFloat(data[i].inputMoney);}}totalMoney = inMoney - outMoney;inMoney = inMoney.toFixed(1);outMoney = outMoney.toFixed(1);totalMoney = totalMoney.toFixed(1)this.setData({totalMoney: totalMoney,outMoney: outMoney,outNumber: outNumber,inMoney: inMoney,inNumber: inNumber})console.log(inNumber)}, onTouchStart: util.touchStart, //手指触摸开始onTouchMove: util.touchMove, // 手指触摸滑动onTouchEnd: util.touchEnd, //手指触摸结束onDeleteTap: util.deleteData, //删除数据
})

三、效果图

效果图功能下

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了
点击下载小程序

微信小程序项目实例——记账本相关推荐

微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁文章目录微信小程序项目实例--手势解锁一.项目展示二.设置手势.手势解锁三.手势重置文末:项目代码项目代码见文字底部一.项目展示这是一款简单实用的手势解 ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个文章目录微信小程序项目实例--食堂吃哪个一.项目展示二.操作流程和核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款娱乐性 ...
微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器文章目录微信小程序项目实例--体质计算器一.项目展示二.项目核心代码文末项目代码见文字底部,点赞关注有惊喜一.项目展示体质计算器是一款简单的健康类小程序 ...
微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...
微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
微信小程序项目实例——狼人杀
微信小程序项目实例--狼人杀文章目录微信小程序项目实例--狼人杀一.项目展示二.首页三.游戏页四.特殊角色文末项目代码见文字底部,点赞关注有惊喜一.项目展示狼人杀是一款多人参与的, ...
微信小程序项目实例——我有一支画笔（画画）
微信小程序项目实例--我有一支画笔(画画) 文章目录微信小程序项目实例--我有一支画笔(画画) 一.项目展示二.首页三.自由绘图四.照片绘图文末项目代码见文字底部,点赞关注有惊喜一.项目 ...

微信小程序项目实例——记账本

微信小程序项目实例——记账本

文章目录

一、项目展示

二、首页

三、效果图

文末

微信小程序项目实例——记账本相关推荐

最新文章

热门文章