重要部分学习——记账簿

本次项目开发的目的主要是记账本的开发,最初自己想法简单,把家里的纸质记账簿变成手机上的记账簿。最终自己程序可以实现的功能可以记录每天的账目信息,并形成叠加效果,并按1、2、3……向下进行排列,以实现记账。

展示如下:

其中该程序利用不同按钮实现账目信息的增加或者删除,相关代码如下:

添加账目信息:

 <view class="pure-u-4-24">
<button type="primary" size="mini" bindtap="addWant"> + </button>
</view>

删除账目信息:

 <view class="item">
<text>{{index + 1}}. {{item.Title}}</text>
<icon class="delete" type="cancel" size="15" bindtap="deleteIt" id="{{index}}"/>
</view>

并利用相关布局设计,来给界面、按钮进行相关设置:

/* pages/me/me.wxss */

.title{
color:#06b314;
font-size: 50rpx;
padding:20px 112px;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
box-sizing: border-box;
} .pure-g {
width: 90%;
} input {
border-bottom: 1px solid #ccc;
} button {
color: #ccc;
} .main-items {
margin-top: 30rpx;
} .main-items .item{
display: block;
margin-top: 20rpx;
color: #666;
border-bottom: 1px dashed #888;
padding-bottom: 10rpx;
} .main-items .delete{
float: right;
}

微信小程序--家庭记账本开发--06的更多相关文章

  1. 微信小程序--家庭记账本开发--05

    界面跳转 在微信小程序中,按钮也是<button></button>标签,它是通过bindtap属性来绑定点击事件: <view class="usermott ...

  2. 微信小程序--家庭记账本开发--04

    界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...

  3. 微信小程序--家庭记账本开发--03

    组件.标签以及模板的使用 在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件.标签模板的使用有了初步的了解. 1.组件 组件是数据和方法的简单封装,对于微 ...

  4. 微信小程序--家庭记账本开发--02

    代码文件的了解 对于一个程序的开发,代码的了解的必须的,不同的后缀名文件有着不同的作用,通过学习,对于微信小程序开发中的文件有了自己的理解. 文件概述 一个微信小程序一般有有pages文件夹,util ...

  5. 微信小程序--家庭记账本开发--01

    微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...

  6. 微信小程序--家庭记账本开发--07

    最终展示以及相关代码 1.最终效果展示 最终效果展示已经根据最初要求使用视频拍摄在抖音上,下面是相关页面展示图片: 2.相关代码 本次开发主要页面则是首页界面以及记账界面以及实现页面跳转,以及记账内容 ...

  7. 微信小程序--家庭记账小账本(三)

    家庭记账小账本打算先通过微信小程序来实现,昨天就去注册了解了一下微信小程序,感觉比较复杂而且困难.如何将ecplise源代码与小程序连接,如何建立数据库等等都困扰了我.查阅网上的资料也没有很大的进展. ...

  8. 微信小程序--家庭记账小账本(五)

    (源码已上传至github,https://github.com/xhj1074376195/CostBook_weixin) 今天,尝试弄了账单的表,发现还是弄不了,于是就把账单上的删除功能给去了, ...

  9. 微信小程序--家庭记账小账本(四)

    今天的进展不太顺利,总的账单表,代码改了又改,最后决定用一个新的表,账单界面中弄了一天删除,发现都无法实现想要的效果,于是把账单界面的删除功能去了,就感觉大功告成的时候,发现收入和支出界面的删除也出现 ...

随机推荐

  1. JavaScript继承的几种实现

    0 什么是继承 继承就是获得存在对象已有的属性和方法的一种方式. [2019.4.26 更新]今日又重新学习了一下JS的继承,在这里整理一下以前的笔记并补充一些新的感悟. 1 JS中继承的几种实现方法 ...

  2. ComboBox下拉列表框

    属性:DropDownStyle(下拉.可编辑等).Items(条目) 事件:SelectedIndexChanged选择项改变触发 Items内容:总经理.副总经理.财务部 DropDownStyl ...

  3. Luogu_2015 二叉苹果树

    题目链接 SB 裸题……就是想随便挂在这里……同样的题还有 Luogu_2014 选课. Luogu_2015 二叉苹果树 #include <queue> #include <cs ...

  4. CMDB服务器管理系统【s5day90】:API构造可插拔式插件逻辑

    1.服务器端目录结构: 1.__init__.py from django.conf import settings from repository import models import impo ...

  5. VisualSVN服务器的本地搭建和使用

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  6. va注解应用实例 - Annotation, 自定义注解, 注解类规则【转】

    本文介绍了java的自定义注解及注解类编写的规则, 并通过实例来说明下如何使用java的注解. 实例演示了注解在类,构造方法,方法和字段的使用. 可以从这里下载到完成的工程代码: http://dl. ...

  7. js常用数据类型(Number,String,undefined,boolean) 引用类型( function,object,null ),其他数据类型( 数组Array,时间Date,正则RegExp ),数组与对象的使用

    js常用数据类型 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 typeof()函数查看变量类型 数字类型  Number var a1 = 10; var a2 = 3.66; conso ...

  8. 第二节:框架前期准备篇之AutoFac常见用法总结

    一. 说在前面的话 凡是大约工作在两年以上的朋友们,或多或少都会接触到一些框架搭建方面的知识,只要一谈到框架搭建这个问题或者最佳用法这个问题,势必会引起一点点小小的风波,我说我的好,他说他的好,非常容 ...

  9. 自定义border 为 dashed 时的虚线间距

    li{ width: 100%; height: 3px; background-image: linear-gradient(to right, #009a61 0%, #009a61 50%, t ...

  10. The container 'Maven Dependencies' references non existing library '

    解决办法 uncheck the option "resolve dependencies from workspace projects" from the maven tab ...