背景
有一个日报的列表领导要查看,假如列表很长是个滚动区域
,领导滚动到哪、哪里就设置为已读状态
,这个该怎么实现呢?
思路
关键点在于监听页面的滚动事件
,即某一个日报区域的是否完全显示在可视区域
内。那么要分为以下两种情况:
- 1.列表有滚动:列表数据多、有滚动条了,这时又要分为两种情况
-
- 1.1 滚动区域之内的数据:默认有些数据是完全显示在屏幕内的,需要设置为已读
-
- 1.2 滚动区域之外的数据:有些数据不显示在屏幕内,需要滚动后才能看到,滚动到完全显示了自动设置为已读
- 2.列表无滚动:初始时,数据不多,不产生滚动条
实现过程
说明
本文以vue2 + element-ui
为例
过程
先写一个固定高度的div,超出高度后滚动的样式
<div class="content-right" ref="scrollRef">
</div>
.content-right {
width: 100%;
height: calc(100vh - 290px); // 或者写固定高度
overflow-y: auto;
}
本项目以逻辑引导为主,所以样式代码暂时不贴出来了,只把关键的js代码贴出来,详见注释:
<script>
import { debounce } from "@/utils";
import { listWorkReport, workReportSetRead } from '@/api/bigEvent'
export default {
data() {
return {
reportList: [], // 报告列表
loading: false,
}
},
mounted() {
this.getList()
},
methods: {
/**
* 是否添加滚动监听
* 1.先判断是否有滚动;
* 2.如果没有滚动,直接列表内容设置为已读状态
* 3.如果有滚动,添加滚动监听
* 3.1 把未读假设为已读状态
* 3.2 把可视区域内的内容设置为已读状态
*/
isAddScrollListen() {
const parentHeight = this.$refs.scrollRef.offsetHeight; // 父级(固定高度的部分)
const sonHeight = this.$refs.sonRef.offsetHeight; // 子级 (可滚动区域的列表)
// 子级高度大于父级高度,说明有滚动条,添加滚动监听
if(sonHeight > parentHeight) {
// 添加滚动监听(滚动时触发的事件)
this.$refs.scrollRef.addEventListener('scroll', this.handleScroll);
// 默认把可视区域内的内容自动设置为已读状态
this.$nextTick(() => {
this.boxScroll()
})
} else {
// 否则,直接设置为已读状态
setTimeout(() => {
for(let i = 0; i < this.reportList.length; i++) {
this.reportList[i].status = 1
workReportSetRead({
id: this.reportList[i].id
}).then(res => {})
}
}, 1000)
}
},
// 监听滚动
handleScroll: debounce(function() {
this.$nextTick(() => {
this.boxScroll()
})
}, 400),
// 获取列表
getList() {
this.loading = true
listWorkReport().then(res => {
this.reportList = res.rows
this.loading = false
// 列表有值时添加监听事件
if(res.rows.length > 0) {
this.$nextTick(() => {
this.isAddScrollListen()
})
}
})
},
// 监听滚动,出现滑块的情况
boxScroll() {
const items = this.$refs.ctxRef || []; // ctxRef:滚动列表里的每一项,监听底部完全显示时标记为已读
Array.from(items).forEach((item, index) => {
// 只考虑未读状态,把未读状态标记为已读状态,
const itemData = this.reportList[index]
if(itemData.status == 0) {
const rect = item.getBoundingClientRect();
// 计算某项在可视区域的top值 + 该项的高度 < 窗口可视区域的高度 - 56
// 此处根据具体需要修改值
if(rect.top + rect.height < window.innerHeight - 56) {
workReportSetRead({
id: itemData.id
}).then(res => {
console.log(`第${index + 1}条已读`)
})
}
}
});
},
}
}
</script>
标签:设为,滚动,reportList,列表,自动,读状态,const,监听
From: https://blog.csdn.net/yan1915766026/article/details/141185981