微信账单动态吸顶功能实现逻辑

打开微信账单划拉到不同月份时,会将当月的汇总吸附在手机顶端,动态改变数据.真实微信怎么实现的我不知道,但是我实现的方式是做一个障眼法.

1.当普通列表遍历.

2.判断出需要吸顶那部分的条件,给出吸顶距离

3.所以所有满足条件的元素到了合适的位置就会固定住,不需要判断滚动.它会层叠上去,而不用改变原有的值.

完整代码在末尾,用的是vantUi,但实现逻辑一样

效果

<template><div id="app"><!-- 列表 --><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><div v-for="(item, index) in list" :key="item"><!-- 固定部分 --><van-sticky offset-top="0px" v-if="item % 10 == 0"><!-- 固定内容 --><div style="background: #07c160">{{ index }}</div></van-sticky><van-cell :title="item" /></div></van-list></div>
</template><script>
export default {data() {return {list: [],loading: false,finished: false,};},methods: {onLoad() {// 异步更新数据// setTimeout 仅做示例，真实场景中一般为 ajax 请求setTimeout(() => {for (let i = 0; i < 10; i++) {this.list.push(this.list.length + 1);}// 加载状态结束this.loading = false;// 数据全部加载完成if (this.list.length >= 40) {this.finished = true;}}, 1000);},},
};
</script><style lang="less">
.van-cell__title {padding: 50px;
}
.van-sticky{>div{padding: 50px;}
}
</style>

微信账单动态吸顶功能实现逻辑相关推荐

【Vue3】电商网站吸顶功能
头部分类导航-吸顶功能电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类.需要分类导航一直可见,所以需要一个吸顶导航的效果. 目标:完成头部组件吸顶 ...
使用原生js实现吸顶功能
文章目录前言一.思路二.实现 1.绑定动态组件 2.mounted绑定事件 3.方法的实现 4.销毁事件总结前言吸顶功能在前端中很常见,这里以小米为例,在滚动前是这样的当页面下拉到一定程 ...
[项目技巧]VUE小米商城+跨域+sass编译器封装+吸顶功能
前端跨域三种方案什么是跨域解决方法 CORS 后端修改 JSOP跨域安装插件 JSONP和CORS跨域的区别? JSONP通过js携带请求进行跨域,他不是传统的XHR请求:CORS后台处理跨域 ...
uniapp吸顶功能实现
一.vue页面代码实现 <view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class=&q ...
页面滚动到某一位置吸顶_前端吸顶功能，滚动到一定位置时固定到顶部
2019独角兽企业重金招聘Python工程师标准>>> 适用环境:菜单滑动后固定,搜索框的固定 (只做全了功能,没有写完美样式,明白原理,样式可自行调整,为了区分效果,颜色反差比较明 ...
tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效
吸顶效果 1.结构部分 <view class="tab_box"><view:class="{ active: curIndex === index ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...
android 仿微信账单生成器手机版式,2020微信年度账单生成器
2020微信年度账单生成器是一款十分有意思的年度账单生成的装杯神器软件,这款软件功能十分的强大且好用,可以生成几百万上千万的微信账单,仅供装杯使用,需要的小伙伴赶紧来下载这款2020微信年度账单生成器 ...
vue3实现吸顶效果
一.HTML 用样式控制,如果isFixed 等于true,将内容固定到顶部 <div :class="isFixed ? 'is-fixed' : 'txt'" ref=& ...

微信账单动态吸顶功能实现逻辑

效果

微信账单动态吸顶功能实现逻辑相关推荐

最新文章

热门文章