添加锚点
// :scroll-into-view="scrollViewId"
// :id="item.dot"
// :data-id="`id${item.value}`"
// @tap="onSelectDate($event, item)"
<view class="select_month" :data-id="`id${item.value}`" :class="{active_month: item.value === month}" v-for="item in dateList" :key="item.value" @tap="onSelectDate($event, item)">{{item.name}}</view>
<scroll-view :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation="true" @scroll="onScroll">
<view :id="item.dot" v-for="item in list" :key="item.id">
<detail :item="item"></detail>
</view>
</scroll-view>
监听滚动
scroll-view 标签添加@scroll事件
示例
<template>
<view class="detail_container">
<view class="detail_date_box">
<view class="detail_date" @click="onToggle">
<view class="detail_date_active">{{date}}</view>
<image class="detail_date_more" :class="{open_select: isShow}" src="../../static/more3.png"></image>
</view>
<view v-show="isShow" class="detail_date_select">
<view class="triggle">这是一个小箭头</view>
<view class="select_top">
<image class="select_left" src="../../static/dbarrow.png" @click="year--"></image>
<view class="select_year">{{year}}年</view>
<image class="select_right" src="../../static/dbarrow.png" @click="year++"></image>
</view>
<view class="select_content">
<view class="select_month" :data-id="`id${item.value}`" :class="{active_month: item.value === month}" v-for="item in dateList" :key="item.value" @tap="onSelectDate($event, item)">{{item.name}}</view>
</view>
</view>
</view>
<scroll-view :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation="true" @scroll="onScroll">
<view :id="item.dot" v-for="item in list" :key="item.id">
<detail :item="item"></detail>
</view>
</scroll-view>
</view>
</template>
<script>
import detail from '../../component/detail.vue'
export default{
components: { detail },
data() {
return {
query: null,
scrollViewId: '',
isShow: false,
date: '2020.11',
year: '2020',
month: '11',
monthObj: {},
arr: [12,11,10,9,8,7,6,5,4,3,2,1],
dateList: [
{
name: '一月',
value: 1,
num: 0
},
{
name: '二月',
value: 2,
num: 0
},
{
name: '三月',
value: 3,
num: 0
},
{
name: '四月',
value: 4,
num: 0
},
{
name: '五月',
value: 5,
num: 0
},
{
name: '六月',
value: 6,
num: 0
},
{
name: '七月',
value: 7,
num: 0
},
{
name: '八月',
value: 8,
num: 0
},
{
name: '九月',
value: 9,
num: 0
},
{
name: '十月',
value: 10,
num: 0
},
{
name: '十一月',
value: 11,
num: 0
},
{
name: '十二月',
value: 12,
num: 0
},
],
list: [
{
id: 1,
dot: 'id11',
month: 11,
status: 1,
title: '您推广的XX客户已完成购买',
date: '2020/11/12 09:52',
money: '-1000.03',
unit: 'UAD'
},
{
id: 2,
month: 11,
dot: '11_2',
status: 2,
title: '您推广的XX客户已退款',
date: '2020/11/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 3,
month: 11,
dot: '11_3',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/11/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 4,
month: 11,
dot: '11_4',
status: 4,
title: '10月提成确认',
date: '2020/11/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 5,
month: 11,
dot: '11_5',
status: 1,
title: '您推广的XX客户已完成购买',
date: '2020/11/12 09:52',
money: '-1000.03',
unit: 'UAD'
},
{
id: 6,
month: 11,
dot: '11_6',
status: 2,
title: '您推广的XX客户已退款',
date: '2020/11/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 7,
month: 11,
dot: '11_7',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/11/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 8,
month: 10,
dot: 'id10',
status: 4,
title: '10月提成确认',
date: '2020/10/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 9,
month: 10,
dot: '10_1',
status: 1,
title: '您推广的XX客户已完成购买',
date: '2020/10/12 09:52',
money: '-1000.03',
unit: 'UAD'
},
{
id: 10,
month: 10,
dot: '10_2',
status: 2,
title: '您推广的XX客户已退款',
date: '2020/10/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 11,
month: 10,
dot: '10_3',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/10/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 12,
month: 10,
dot: '10_4',
status: 4,
title: '10月提成确认',
date: '2020/10/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 13,
month: 10,
dot: '10_5',
status: 1,
title: '您推广的XX客户已完成购买',
date: '2020/10/12 09:52',
money: '-1000.03',
unit: 'UAD'
},
{
id: 14,
month: 9,
dot: 'id9',
status: 2,
title: '您推广的XX客户已退款',
date: '2020/09/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 15,
month: 9,
dot: '9_2',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/09/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 16,
month: 9,
dot: '9_3',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 17,
month: 9,
dot: '9_4',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/09/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 18,
month: 9,
dot: '9_5',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 19,
month: 9,
dot: '9_6',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/09/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 20,
month: 9,
dot: '9_7',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 21,
month: 9,
dot: '9_8',
status: 3,
title: '您推广的XX客户已完成购买',
date: '2020/09/12 09:52',
money: '10000.03',
unit: 'UAD',
},
{
id: 22,
month: 9,
dot: '9_9',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 23,
month: 9,
dot: '9_10',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
},
{
id: 24,
month: 9,
dot: '9_11',
status: 4,
title: '10月提成确认',
date: '2020/09/12 09:52',
money: '-10000.03',
unit: 'UAD',
}
]
}
},
mounted() {
this.list.forEach((item, index) => {
this.monthObj[item.month] = (this.monthObj[item.month] || 0) + 71
})
this.arr.forEach(key => {
if (this.monthObj[key]) {
this.monthObj[key] = this.monthObj[key] + (this.monthObj[key + 1] || 0)
}
})
},
methods: {
onScroll(event) {
const deltaY = !!event.detail.deltaY // 大于0上滑，小于0下滑
const scrollTop = event.detail.scrollTop + 5
const arr = Object.keys(this.monthObj)
for (let i = 0; i < this.arr.length; i++) {
let id = ''
if (this.monthObj[this.arr[i]] && this.monthObj[this.arr[i]] <= scrollTop && this.monthObj[this.arr[i+1]] > scrollTop) {
id = this.arr[i] - 1
}
if (deltaY && this.monthObj[this.arr[i]] >= scrollTop && this.monthObj[this.arr[i+1]] >= scrollTop) {
id = this.arr[i]
}
if (id) {
this.month = id
this.date = `${this.year}.${id < 10 ? '0'+id : id}`
break
}
}
},
onViewDetailList() {
// uni.navigateTo({
// url: '../confirmSheet/index'
// })
},
onToggle() {
this.isShow = !this.isShow
},
onSelectDate(event, item) {
this.month = item.value
const month = this.month < 10 ? `0${this.month}` : this.month
this.date = `${this.year}.${month}`
this.isShow = false
this.scrollViewId = event.currentTarget.dataset.id
}
}
}
</script>
<style scoped>
scroll-view{
height: calc(100vh - 100rpx);
}
.detail_container{
padding: 100rpx 40rpx 40rpx 40rpx;
}
.detail_date_box{
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 10px 20px;
background-color: #fff;
z-index: 40;
}
.detail_date{
display: flex;
width: 194rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
color: #222222;
font-size: 26rpx;
border-radius: 28rpx;
border: 2rpx solid #979797;
}
.detail_date_active{
width: 150rpx;
}
.detail_date_more{
width: 28rpx;
height: 14rpx;
vertical-align: middle;
margin: 22rpx 0 0 0;
}
.open_select{
transform: rotateZ(180deg);
}
.detail_date_select{
position: absolute;
left: 0;
top: 76rpx;
width: 400rpx;
padding: 0 20rpx 20rpx 20rpx;
background: #FFFFFF;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.13);
border: 1px solid #EEEEEF;
}
.triggle{
position: absolute;
width: 14rpx;
height: 14rpx;
transform: rotate(45deg);
background-color: #fff;
z-index: 30;
top: -5px;
left: 25%;
margin-left: -7rpx;
color: #fff;
overflow: hidden;
border-left: 2rpx solid #EEEEEF;
border-top: 2rpx solid #EEEEEF;
}
.select_top{
display: flex;
padding: 20rpx 0;
height: 30rpx;
line-height: 30rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
border-bottom: 2rpx solid #EEEEEF;
}
.select_left,
.select_right{
width: 28rpx;
height: 24rpx;
margin: 4rpx 0 0 0;
}
.select_left{
transform: rotateY(180deg);
}
.select_year{
flex: 1;
text-align: center;
}
.select_content{
display: flex;
flex-wrap: wrap;
}
.select_month{
width: 25%;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
color: #222222;
line-height: 80rpx;
text-align: center;
}
.active_month{
color: #FC753B;
}
</style>
网友评论