首页 > 其他分享 >自动设为已读状态

自动设为已读状态

时间:2024-08-15 08:58:29浏览次数:12  
标签:设为 滚动 reportList 列表 自动 读状态 const 监听

背景

有一个日报的列表领导要查看,假如列表很长是个滚动区域,领导滚动到哪、哪里就设置为已读状态,这个该怎么实现呢?

思路

关键点在于监听页面的滚动事件,即某一个日报区域的是否完全显示在可视区域内。那么要分为以下两种情况:

  • 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

相关文章

  • AC 自动机(简单版)
    具体讲解看OI-wiki就好了构建字典图的那个位置,只用理解路径压缩就好了;在路径压缩完了之后,tr[u][i]表示的是状态\(u\)接上一个字符\(i\)所表示的字符串能够与\(Q\)所匹配的最大后缀长度。形式化地,设\(s=u+i\),令\(P\)为\(s\)的后缀集合,tr[u][i]=\(\max(|p|)\),其中\(p∈P\)且存在\(v......
  • zabbix-自动注册
    一、自动注册原理自动注册,主要是Agent主动向zabbixserver注册;自动注册主要分为两个步骤:自动注册,客户端必须开启主动模式,并设定主机名在zabbixweb的告警-->动作-->自动注册动作,创建一个动作二、自动注册实践根据不同的主机名称或主机元数据关联不同的模板1、配置Ag......
  • 一键自动化安装Docker
    一、Docker背景在我们安装Docker时候需要配置网络类型flannel+etcd,在多台服务器中脚本可以大大解决安装配置速度我们这里的Docker版本以docker-20.10.24为例;根据个人需求可更换二、一键自提:链接:https://pan.baidu.com/s/1BT5_r0WUX5nhRRNLvSafiw?pwd=j6k5提取码:j6k5三、脚......
  • Delphi编程艺术:注释技巧与文档自动化
    标题:Delphi编程艺术:注释技巧与文档自动化引言在Delphi开发中,注释和文档生成是编写可维护代码的基础。Delphi支持多种注释方式,同时提供了工具和方法来自动化文档的生成。本文将详细介绍Delphi中的注释类型,以及如何使用Delphi生成Word文档等自动化文档的技巧。Delphi中的注......
  • 【Python-办公自动化】1秒比较出2张表格之间的不同并标黄加粗
    欢迎来到"花花ShowPython",一名热爱编程和分享知识的技术博主。在这里,我将与您一同探索Python的奥秘,分享编程技巧、项目实践和学习心得。无论您是编程新手还是资深开发者,都能在这里找到有价值的信息和灵感。自我介绍:我热衷于将复杂的技术概念以简单易懂的方式呈现给大家,......
  • 【Python-办公自动化】几秒搞定几天的工作量之根据指定要求汇总求和排序成278张表格
    欢迎来到"花花ShowPython",一名热爱编程和分享知识的技术博主。在这里,我将与您一同探索Python的奥秘,分享编程技巧、项目实践和学习心得。无论您是编程新手还是资深开发者,都能在这里找到有价值的信息和灵感。自我介绍:我热衷于将复杂的技术概念以简单易懂的方式呈现给大家,......
  • 谷歌浏览器自动选择证书
    https://blog.csdn.net/u012399690/article/details/139425961使用场景在使用selenium自动化银行类网页时,有时网页会弹出选择证书的弹框,该弹框无法通过元素定位进行操作 方案一模拟按键利用键盘enter键盘此种方案较为简单,但不够稳定,需要有大量容错判断方案二更改注册......
  • NIFI系列---【设置开机自动重启】
    InstallingasaServiceCurrently,installingNiFiasaserviceissupportedonlyforLinuxandmacOSusers.Toinstalltheapplicationasaservice,navigatetotheinstallationdirectoryinaTerminalwindowandexecutethecommandbin/nifi.shinstallt......
  • 【Web自动化测试】UnitTest基础入门(1)
    目录:1.UnitTest核心要素2.断言3.参数化4.跳过5.基于UnitTest生成HTML测试报告---------------------------------------------------------------------------------------------------------------------------------1.UnitTest核心要素1.TestCase(测试用例)importun......
  • Go 语言中的方法接收者自动转换机制:深入理解与实际应用
    在Go语言中,方法接收者可以是值接收者或指针接收者,而Go为开发者提供了一个方便的功能:自动接收者类型转换。这个功能使得我们在调用方法时可以更加灵活,不必担心接收者类型是否完全匹配。然而,尽管这个机制带来了便利,但开发者仍然需要注意方法接收者类型的选择,因为它们在功能、性......