6.小程序页面布局 - 账单明细

最新推荐文章于 2024-10-23 20:21:58 发布

Kelvin写代码

最新推荐文章于 2024-10-23 20:21:58 发布

阅读量2k

点赞数 18

分类专栏：微信小程序文章标签：小程序账单列表页 Promise同步 flex布局 scroll-view下拉刷新 scroll-view触底加载

本文链接：https://blog.csdn.net/sdfiiiiii/article/details/139104787

版权

文章目录

1. 6.小程序页面布局 - 账单明细

1. 6.小程序页面布局 - 账单明细

1.1. 竞品

之前已经做好了《5.小程序页面布局 - 记账页面》

现在开始进行编写账单明细的页面，还是一样的套路，我们看看竞品大概是什么样：

1.2. 布局分析

竞品主要是3大块：

头部：显式时间、收入、支出总览

快捷入口：一些按钮，账单、预算、资产管家等

账单明细：按天，当月倒序排列，如果一天有多笔支出，要计算一下当日汇总。（参考上图的“4月27日”效果）
我们现在要做什么？

头部需要：一样显式时间，增加一个“切换账簿”，来支持切换到其他的账簿合作记账

快捷入口：暂时取消，待功能需求稳定后增加

账单明细：参考竞品

1.3. 布局demo

直接看结果先：

整体还是一目了然的，已经把各个区域加了边框。

尽量使用了简单的布局方式，没有加样式，因为我们主要使用vView组件来做实现。

布局，主要使用的就是flex布局。

上图的源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
        }

        body {
     
            width: 390px;
        }

        /* 头部区域样式 */
        .header {
     
            background-color: aliceblue;
            height: 150px;
            display: flex;
            align-items: center;
        }

        /* 头部的4个块，flex布局，平分 */
        .header .header-date,
        .header .header-income,
        .header .header-out,
        .header .header-switch {
     
            height: 100px;
            border: 1px solid black;
            /* 每个块，都占总宽度的25% */
            width: 25%;
            /* 开启flex布局 */
            display: flex;
            /* 主轴是y轴，这样，可以让里面的内容上下排布 */
            flex-direction: column;
            /* 主轴y轴居中对齐 */
            justify-content: center;
            /* 侧轴x轴居中对齐 */
            align-items: center;
            /* 每个块，都是100%宽度，不然就是靠内容撑开的宽度 */
            width: 100%;
        }

        /* 列表区域布局 */
        .content {
     
            background-color: antiquewhite;
            height: 644px;
        }

        /* 当日小计 */
        .content .content-day-header {
     
            height: 28px;
            display: flex;
            justify-content: space-between;
            margin: 0 20px;
            background-color: #808080;
            align-items: center;
        }

        .content .content-day-list {
     
            /* display: flex; */

        }

        /* 支出明细 */
        .content .content-day-list .content-day-list-line {
     
            width: 90%;
            height: 43px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
        }

        /* 支出明细 - 左边的 图+名目 */
        .line-left {
     
            width: 100px;
            display: flex;
            border: 1px solid black;
            align-items: center;
        }

        .line-left img {
     
            width: 24px;
            height: 24px;
        }

        /* 支出明细 - 右边的 金额 */
        .line-right {
     
            width: 100px;
            display: flex;
            justify-content: flex-end;
            border: 1px solid black;
            align-items: center;
        }
    </style>
</head>


<body>

    <div class="header">

        <div class="header-date">
            <div>2024</div>
            <div>05月 🔽</div>
        </div>
        <div class="header-income">
            <div>收入</div>
            <div>9999.99元</div>
        </div>
        <div class="header-out">
            <div>支出</div>
            <div>8888.88元</div>
        </div>
        <div class="header-switch">
            <div>切换账单</div>
        </div>

    </div>

    <div class="content">
        <!-- 第一天 -->
        <div class="content-day-header">
            <div>04月27日 星期六</div>
            <div>-299</div>
        </div>
        <div class="content-day-list">
            <div class="content-day-list-line">
                <div class="line-left">
                    <div class="line-img">
                        <img src="礼物.png" />
                    </div>
                    <div class="line-text">餐饮</div>
                </div>
                <div class="line-right">
                    <div class="line-money">-200</div>
                </div>
            </div>
            <div class="content-day-list-line">
                <div class="line-left">
                    <div class="line-img">
                        <img src="交通.png" />
                    </div>
                    <div class="line-text">交通</div>
                </div>
                <div class="line-right">
                    <div class="line-money">-99</div>
                </div>
            </div>
        </div>

        <!-- 第二天 -->
        <div class="content-day-header">
            <div>04月27日 星期六</div>
            <div>-299</div>
        </div>
        <div class="content-day-list">
            <div class="content-day-list-line">
                <div class="line-left">
                    <div class="line-img">
                        <img src="礼物.png" />
                    </div>
                    <div class=

最低0.47元/天解锁文章