<template>
<view class="month-list" :style="{ width: '100%', height: '100%' }" ref="scroll">
<view style="width:100%;height:100%">
<view v-for="(item, index) in dataList" :key="index" class="main">
<!-- 头部吸顶部分 -->
<view :class="['common', 'flex-between', 'main-title', item.scrollIndex == index ? 'sticky': '']">
<view class="semibold text-333">
<text class="text64">{
{item.onlyMonth}}</text>
<text class="text30"
style="margin-left:8rpx;position:relative;top:-4rpx;font-weight: 700;">{
{index+1}}月</text>
<u-icon @click="changeMonth(item)" :name="item.flag?'arrow-up-fill':'arrow-down-fill'" size="15"
class="icon" v-if="item.scrollIndex == index"></u-icon>
</view>
<view class="text-666" style="position:relative;top:8rpx">{
{item.type?'支出':'收入'}} ¥{
{item.income}}
</view>
</view>
<view class="line-grey" v-if="!isSticky"></view>
<!-- 月内列表 -->
<view class="receive-list" v-for="(i,idx) in item.dayList" :key="idx" @click="toDetail"
hover-class="receive-list-hover">
<view class="flex-between-top">
<!-- <view class="avator"> -->
<image :src="i.payerImg" class="avator"></image>
<!-- </view> -->
<view class="right flex-between">
<view class="right-left flex-column-between-left text-999">
<text style="font-size: 26rpx;">{
{i.payerName}}</text>
<text class="text26"
style="margin-top:8rpx;font-size: 24rpx;color: #b4b4b4;">{
{item.moneyType?'提现':'转账红包'}}</text>
<text class="text26" style="margin-top:8rpx;font-size: 24rpx;color: #b4b4b4;"
v-if="i.today">{
{i.today}}
{
{i.payTime}}</text>
<text class="text26" style="margin-top:8rpx;font-size: 24rpx;color: #b4b4b4;"
v-else-if="i.ystd">{
{i.ystd}}
{
{i.payTime}}</text>
<text class="text26" style="margin-top:8rpx;font-size: 24rpx;color: #b4b4b4;"
v-else>{
{i.payTime}}</text>
</view>
<view class="right-right ubuntu text36">+{
{i.money}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selectorQuery: {}, // Uniapp SelectorQuery 对象实例
mainTitleEles: [], // 所有mainTitle标题对象集合
mainEles: [], // 所有板块对象集合
ot: [], //存储每个标题的offsetTop
len: 0, // 标题的个数
searchBottomY: 0, // 搜索view底部距离页面顶部的距离
dataList: [{
"type": 1,
"month": "2021-08",
"income": 55.50,
"expend": 0,
"scrollIndex": 10,
"dayList": [{
"id": 1,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": "2023-07-10"
}, {
"id": 1,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": "2023-07-10"
}, {
"id": 1,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": "2023-07-10"
}, {
"id": 1,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": "2023-07-10"
}, {
"id": 1,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": "2023-07-10"
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 1,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 0,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 1,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 1,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
{
"month": "2021-07",
"income": 55.50,
"expend": 0,
"scrollIndex": 0,
"dayList": [{
"id": 9,
"payerName": "中国体彩中奖啦",
"payerImg": " https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/log1.png",
"type": 1,
"moneyType": 0,
"money": 55.50,
"payTime": 1629699870000
},
//这里自行复制几份
]
},
]
}
},
mounted() {
// 一定要写在mounted钩子函数中，在这之前页面数据及渲染还没完成，获取不到元素信息会报错
// 获取 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点
this.selectorQuery = uni.createSelectorQuery().in(this);
this.initFixedTop()
},
/**
* 监听页面滑动事件
*/
onPageScroll(mescroll) {
const st = mescroll.scrollTop;
for (let i = 0; i < this.len; i++) {
// 滚动时监听位置，为标题的吸顶设置一个显示范围
// if (st > this.ot[i] && st < this.ot[i + 1]) {
if (st > this.ot[i] && st < this.ot[i + 1]) {
this.dataList[i].scrollIndex = i
} else {
this.dataList[i].scrollIndex = i + 1 //+1是为了保持与上面不一样
}
}
},
methods: {
changeMonth(item) {
console.log(item, '------------65');
},
initFixedTop() {
this.mainTitle = this.selectorQuery.selectAll('.main-title');
// 获取所有需要吸顶效果的标题
uni.createSelectorQuery().selectAll('.main-title').fields({
rect: true,
dataset: true
}, res => {
this.mainTitleEles = res;
// 标题的个数
this.len = this.mainTitleEles.length;
if (this.len > 0) {
for (let i = 0; i < this.len; i++) {
this.ot.push(this.mainTitleEles[i].top); //获取每个标题的offsetTop
}
// 获取所有需要吸顶的板块
uni.createSelectorQuery().selectAll('.main').fields({
rect: true,
dataset: true,
size: true
}, res => {
this.mainEles = res;
// 存储每个标题的offsetTop（只读属性，返回当前元素相对于其 offsetParent 元素的顶部内边距的距离）
// 加上 最后一个吸顶板块的高度. 解决滚动到最后一个标题（i）时，无法获取（i+1）的offsetTop
this.ot.push(this.mainEles[this.len - 1].top + this.mainEles[this.len - 1]
.height);
}).exec();
}
}).exec();
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
background-color: paleturquoise;
}
.text-666 {
font-size: 26rpx;
color: #fff;
background-color: royalblue;
padding:0 10rpx;
border-radius: 10rpx;
}
.semibold {
box-sizing: border-box;
}
.month-list {
.common {
height: 140rpx;
padding: 0 40rpx;
}
.sticky {
width: 100%;
position: -webkit-sticky;
position: sticky;
top: 0rpx;
background-color: #F3F3F7;
z-index: 999;
}
.receive-list {
padding: 30rpx 40rpx 0 40rpx;
.avator {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
.right {
flex: 1;
margin-left: 20rpx;
.right-right {
margin-right: 4rpx;
}
}
}
.icon {
position: relative;
top: -4rpx;
left: 8rpx;
}
/* 顶边散开 */
.flex-between {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-between-top {
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-column-between-left {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}
}
</style>