账单列表滑动月份统计固定位置

已于 2024-05-20 16:31:05 修改
阅读量190 收藏
点赞数 3
文章标签： css3 css 前端
于 2024-05-20 16:25:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_ciyi/article/details/139068397
版权

微信，支付宝，银行有个账单列表，按月统计每一条交易记录

滚动列表效果-CSDN直播
微信的效果是滑动的时候统计月份数按原有样式固定
样式直接就可以解决
position: sticky;top:0; 就可以解决


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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

    <title></title>
</head>
<style>
    body {
        background: #f7f8fa;
        margin: 0;
        padding: 0;
    }

    #app {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bill-scroll {
        flex: 1;
        overflow: auto;
    }

    .item-list-con {
        height: 150px;
        line-height: 150px;
        text-align: center;
    }

    .item-list-time {
        color: #c8c9cc;
        padding-bottom: 10px;
    }

    .item-list {
        border-radius: 4px;
        background: #fff;
        margin-bottom: 20px;
    }

    #loadmore {
        text-align: center;
    }

    .item-date,
    .item-date-scroll {
        padding: 20px 10px;
    }

    .item-date-scroll {
        position: absolute;
        background: #FFA852;
        width: 100%;
    }

    .loadmore-area {
        margin: 20px 0;
    }

    .bill-count {
        line-height: 60px;
        margin: 0 10px;
    }


    .item-date {

        position: sticky;
        top: 0;
    }
</style>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div class="bill-count">最近{{allmonth}}月的消费记录</div>
        <div class="bill-scroll">
            <template v-for="(item,index) in list" :key="index">
                <div class="item-date" :style="{background:item.color}"
                    v-show="!list[index-1]||list[index-1].time!==item.time">
                    <div class="item-date-text">{{item.time}}</div>
                </div>
                <div class="item-list" :data-index="index" :data-time="item.time">
                    <div class="item-list-con"> {{item.text}}</div>
                    <div class="item-list-time">{{item.time}}</div>
                </div>
            </template>
            <div class="loadmore-area" v-show="allmonth">
                <div id="loadmore">loadmore</div>
            </div>


        </div>
    </div>

    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {

                return {
                    list: ref([]),
                    allmonth: 12,
                    restmonth: 20,
                    loading: false,
                }
            },
            mounted() {
                observer = new IntersectionObserver(
                    (entries) => {

                        let loading = entries.find((item) => {
                            return item.target.id === 'loadmore';
                        })
                        // 加载更多处理
                        if (loading?.isIntersecting) {
                            // console.log(loading)
                            this.loadMore()
                        }
                    }, {
                    threshold: [0, 1]
                });
                // 加载更多
                observer?.observe(document.getElementById('loadmore'));
                this.list = this.list.concat(this.getData())
            },
            methods: {
                loadMore() {
                    if (!this.restmonth || this.loading) return

                    this.loading = true
                    setTimeout(() => {
                        this.restmonth--
                        this.list = this.list.concat(this.getData())
                        this.loading = false
                    }, 1000);
                },
                getData() {

                    let data = [];
                    let colorList = ['#FFE0FA', '#FFE0EB', '#FFE5E0', '#FFF5E0', '#F5E0FF',
                        '#FAFFE0', '#E5E0FF', '#EBFFE0', '#E0EBFF', '#E0FAFF', '#E0FFF5', '#E0FFE5']
                    for (let i = 0; i < 10; i++) {
                        data.push({
                            time: this.formateDate(),
                            text: '测试数据',
                            color: colorList[Math.floor(Math.random() * colorList.length)],
                        })
                    }
                    return data
                },
                formateDate() {
                    let reduceMonth = this.allmonth - this.restmonth
                    let month = new Date().getMonth() - reduceMonth
                    let year = new Date().getFullYear()
                    if (month < 0) {
                        year = year + Math.ceil(month / 12) - 1
                    }
                    if (month < 0) {
                        month = 12 + month % 12
                    }
                    let curTime = new Date(year, month, 1)
                    return curTime.getFullYear() + '-' + (curTime.getMonth() + 1) + '-' + curTime.getDate()
                }
            },
            unMounted() {
                observer?.disconnect();
            }
        }).mount('#app')
    </script>

</body>

</html>


但是 产品肯定要的不一样的像支付宝和银行一样
原有位置显眼一点，固定的就朴素一点
那就用IntersectionObserver处理
IntersectionObserver 是一个浏览器原生API，用于监测DOM元素是否与其祖先元素（通常是视口）发生交叉，或者与视口的边界相交。这个API可以用于实现许多功能
应用：懒加载，无限滚动，动画滚动，性能优化
demo的触发加载更多使用的也是IntersectionObserver

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />

    <title></title>
</head>
<style>
    body {
        background: #f7f8fa;
        margin: 0;
        padding: 0;
    }

    #app {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bill-scroll {
        flex: 1;
        overflow: auto;
    }

    .item-list-con {
        height: 150px;
        line-height: 150px;
        text-align: center;
    }

    .item-list-time {
        color: #c8c9cc;
        padding-bottom: 10px;
    }

    .item-list-area {
        padding: 0 10px;
    }

    .item-list {
        border-radius: 4px;
        background: #fff;
        margin-bottom: 20px;
    }

    #loadmore {
        text-align: center;
    }

    .item-date,
    .item-date-scroll {
        padding: 20px 10px;
    }

    .item-date-scroll {
        position: absolute;
        background: #FFA852;
        left: 0;
        right: 0;
    }

    .loadmore-area {
        margin: 20px 0;
    }

    .bill-count {
        line-height: 60px;
        margin: 0 10px;
    }
</style>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <div class="bill-count">最近{{allmonth}}月的消费记录</div>
        <div class="bill-scroll" @scroll="scroll">
            <div class="item-date-scroll" v-show="showScrollTime&&scrollTime">{{scrollTime}}</div>
            <div v-for="(item,index) in list" :key="index" class="item-list-area">
                <div class="item-date" :style="{background:item.color}"
                    v-show="!list[index-1]||list[index-1].time!==item.time">
                    <div class="item-date-text">{{item.time}}</div>
                </div>
                <div class="item-list" :data-index="index" :data-time="item.time">
                    <div class="item-list-con"> {{item.text}}</div>
                    <div class="item-list-time">{{item.time}}</div>
                </div>
            </div>
            <div class="loadmore-area" v-show="allmonth">
                <div id="loadmore">loadmore</div>
            </div>


        </div>
    </div>

    <script>
        const { createApp, ref } = Vue
        let observer = null
        let objCount = {}
        createApp({
            setup() {

                return {
                    list: ref([]),
                    allmonth: 12,
                    restmonth: 20,
                    loading: false,
                    scrollTime: ref(''),
                    showScrollTime: ref(false)
                }
            },
            mounted() {
                observer = new IntersectionObserver(
                    (entries) => {

                        let loading = entries.find((item) => {
                            return item.target.id === 'loadmore';
                        })
                        // 加载更多处理
                        if (loading?.isIntersecting) {
                            // console.log(loading)
                            this.loadMore()
                        }
                        let tpm = entries.map((item) => {
                            let index = item.target.dataset.index;
                            if (item.isIntersecting) {
                                objCount[index] = {
                                    isIntersecting: item.isIntersecting,
                                    time: item.target.dataset.time
                                };
                            } else if (objCount[index]) {
                                delete objCount[index];
                            }
                            return {
                                isIntersecting: item.isIntersecting,
                                top: item.boundingClientRect.top,
                                index: item.target.dataset.index,

                            };
                        });
                        // console.log(JSON.stringify(tpm));
                        for (let key in objCount) {
                            if (objCount[key]?.isIntersecting) {
                                this.scrollTime = objCount[key].time;
                                break;

                            }

                        }
                    }, {
                    threshold: [0, 1]
                });
                // 加载更多
                observer?.observe(document.getElementById('loadmore'));
                this.list = this.list.concat(this.getData())
                //加载完成 监听dom
                this.$nextTick(() => {
                    this.listenItem()
                })
            },
            methods: {
                scroll(e) {
                    if (e.target.scrollTop >= 60) {
                        this.showScrollTime = true
                    } else {
                        this.showScrollTime = false
                    }
                },
                loadMore() {
                    if (!this.restmonth || this.loading) return

                    this.loading = true
                    setTimeout(() => {
                        this.restmonth--
                        this.list = this.list.concat(this.getData())
                        //加载完成 监听dom
                        this.$nextTick(() => {
                            this.listenItem()
                        })
                        this.loading = false
                    }, 1000);
                },
                getData() {

                    let data = [];
                    let colorList = ['#FFE0FA', '#FFE0EB', '#FFE5E0', '#FFF5E0', '#F5E0FF',
                        '#FAFFE0', '#E5E0FF', '#EBFFE0', '#E0EBFF', '#E0FAFF', '#E0FFF5', '#E0FFE5']
                    for (let i = 0; i < 10; i++) {
                        data.push({
                            time: this.formateDate(),
                            text: '测试数据',
                            color: colorList[Math.floor(Math.random() * colorList.length)],
                        })
                    }
                    return data
                },
                listenItem() {
                    document.querySelectorAll('.item-list').forEach((item) => {
                        observer?.observe(item);
                    });
                },
                formateDate() {
                    let reduceMonth = this.allmonth - this.restmonth
                    let month = new Date().getMonth() - reduceMonth
                    let year = new Date().getFullYear()
                    if (month < 0) {
                        year = year + Math.ceil(month / 12) - 1
                    }
                    if (month < 0) {
                        month = 12 + month % 12
                    }
                    let curTime = new Date(year, month, 1)
                    return curTime.getFullYear() + '-' + (curTime.getMonth() + 1) + '-' + curTime.getDate()
                }
            },
            unMounted() {
                observer?.disconnect();
            }
        }).mount('#app')
    </script>

</body>

</html>

若有收获，就点个赞吧

拾忆276
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿新版支付宝账单页面滑动时月份栏被下一个月给顶上去
xs199562qq的博客
04-25 2275
前段时间支付宝账单出现了新特效，就是下月账单可以推送上月账单的吸顶位置，公司抽风似的也要我写个和支付宝一样的效果。。。。。 不多说上代码： 首先：HTML JS 96参数需要大家自己去试 css 自己试过除了没有支付宝那么平滑，其他显示都OK的，要是有大神能帮忙优化一下就更好了 ...
vue列表固定列滚动
weixin_40400844的博客
07-10 1474
vue列表固定列滚动
微信小程序仿支付宝年账单页面滑动的效果展示
@Grapefruit的博客
10-21 3872
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 近来要做一个年账单页面，类似于支付宝年账单，就是对一年下单的总结，但是支付宝页面滑动的效果在小程序上是有些bug的，柚子也是研究了很久了，但自认还算完美吧，下面把过程说一下，希望能对某些朋友有所帮助： 1、首先要有页面滑动动画的效果，就必须要监听页面的滚动，监听你手指是向上...
微信账单动态吸顶功能实现逻辑
weixin_47886687的博客
04-24 601
打开微信账单划拉到不同月份时,会将当月的汇总吸附在手机顶端,动态改变数据.真实微信怎么实现的我不知道,但是我实现的方式是做一个障眼法. 1.当普通列表遍历. 2.判断出需要吸顶那部分的条件,给出吸顶距离 3.所以所有满足条件的元素到了合适的位置就会固定住,不需要判断滚动.它会层叠上去,而不用改变原有的值. 完整代码在末尾,用的是vantUi,但实现逻辑一样 效果 <template> <div id="app"> <!-- 列表 --> &..
微信小程序 - 列表滚动头部吸顶
iotjin的专栏
06-15 1509
demo 地址: https://github.com/iotjin/Jh_weapp 效果图： 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position: sticky; top: 0; } .
微信小程序-账单页面月份悬浮替换
chen_x_w的博客
08-23 931
实现效果如图所示，废话不多说下拉看代码 首先，在wxml文件中进行数据遍历渲染，并添加定位view <view class="container"> <!-- 悬浮窗内容 --> <view class="item_top suspension" wx:if="{{is_suspension}}"> <picker mode="date" value="{{m.formattingDate(list[suspension_ind
python统计年度消费账单
04-22
年度消费账单是指个人或家庭在一年内的所有消费记录...统计和分析：通过对消费数据的统计和分析，可以了解整体的消费水平、主要支出项目以及各类别的消费比例。这有助于识别消费习惯、发现潜在节省机会并进行财务规划。
仿支付宝账单列表
07-14
在压缩包子文件的文件名称列表"StickyHeaderGridViewOrListview"中，"StickyHeader"是指在ListView或GridView中，某些头部View（比如月份）会在用户滚动时保持固定在顶部，直到新的头部View取代它。这种效果可以增强...
Node.js-RxjavaRetrofitMVPAOP类似支付宝微信账单明细列表
08-12
标题 "Node.js-RxjavaRetrofitMVPAOP类似支付宝微信账单明细列表" 提到的是一个结合了多种技术实现的项目，主要针对Android应用开发，旨在创建一个类似于支付宝或微信的账单明细展示功能。这个项目的核心技术栈包括...
Python 统计年度消费账单 Python源码
10-23
Python 统计年度消费账单 Python源码Python 统计年度消费账单 Python源码Python 统计年度消费账单 Python源码Python 统计年度消费账单 Python源码Python 统计年度消费账单 Python源码Python 统计年度消费账单 Python...
android仿支付宝账单统计图
08-26
在Android开发中，为了提供用户友好的界面和丰富的交互体验，常常需要实现各种图表功能，如支付宝账单统计图所示。这种图表通常采用饼图的形式，因为它能够直观地展示各个部分占整体的比例，非常适合用于财务数据的...
CSS3模拟windows加载效果
最新发布
u011626414的专栏
08-14 245
Windows加载效果
css实现水滴效果图
yinge0508的博客
08-12 1091
【代码】css实现水滴效果图。
CSS 多按钮根据半圆弧度排列
前端技术
08-08 471
多个按钮根据弧度，延边均匀排列。
关于 Lora中 Chirp Spread Spectrum(CSS)调制解调、发射接收以及同步估计的分析
m0_64636251的博客
08-14 412
本文结合相关论文对CSS信号的数学形式、调制解调、发射接收以及同步估计做了全面分析，希望有助于更好地理解lora信号。
CSS（层叠样式表）
Chujun123528的博客
08-09 1220
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
如何在Vue中使用CSS Modules替代Scoped CSS
小刘哥的博客
08-09 81
标签，使得CSS样式仅应用到当前组件的元素上。这是通过Vue在内部自动生成唯一的数据属性，并将其作为选择器添加到CSS规则上来实现的。这是一个示例组件.example {color: red;
scratch账单列表删除代码
09-05
账单列表删除代码是指在Scratch中用来删除账单列表中的某个账单的代码。 首先，我们需要声明一个账单列表变量，例如billList。 然后，我们可以使用条件判断和循环语句来遍历账单列表，找到需要删除的账单。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值