- 打开微信账单划拉到不同月份时,会将当月的汇总吸附在手机顶端,动态改变数据.真实微信怎么实现的我不知道,但是我实现的方式是做一个障眼法.
- 1.当普通列表遍历.
- 2.判断出需要吸顶那部分的条件,给出吸顶距离
- 3.所以所有满足条件的元素到了合适的位置就会固定住,不需要判断滚动.它会层叠上去,而不用改变原有的值.
完整代码在末尾,用的是vantUi,但实现逻辑一样
效果
<template>
<div id="app">
<!-- 列表 -->
<van-list
v-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>