使用IntersectionObserver实现通讯簿组件demo（vue）

已于 2023-09-03 23:23:44 修改
阅读量197 收藏 1
点赞数
文章标签： javascript 前端 vue elementui vue.js css
于 2023-09-03 23:11:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44350560/article/details/130233499
版权

目录

一、准备

0、首先，先下载一个后面需要用到的包：

1、在utils.js中准备几个用处理数据的函数:

二、开始

0、布局，初始化数据

1、点击右侧字母导航栏，滚动到相应位置

2、鼠标滚动到相应位置，右侧字母导航栏的选中项也相应改变

三、完整代码

0、组件调用代码：

1、组件代码：

只需要把展示数组数据给组件，组件就会按照拼音首字母分组排列，且右边字母导航栏会有相应样式变化。点击右侧字母导航栏，会滚动到相应的分组。

一、准备

0、首先，先下载一个后面需要用到的包：

// 下载
npm i js-pinyin

// 引入
import pinyin from 'js-pinyin'

// 它可以用于根据中文生成拼音
// console.log(pinyin.getFullChars('管理员'));  GuanLiYuan

1、在utils.js中准备几个用处理数据的函数:

import pinyin from 'js-pinyin'


/**
 * 
 * @returns 生成随机字符串
 */
export function getUUID () {
  function rx () {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return `node_${+new Date()}_${rx()}${rx()}`;
}

/**
 * 
 * @returns 生成a-z+#的数组
 */
export function getLetters () {
  return Array.from({ length: 26 }, (v, i) => String.fromCharCode(65 + i)).concat(["#"])
}


/**
 * 
 * @param {*} number 生成通讯簿数据
 */
export function generateRandomName (number = 100) {
  const names = [
    "张", "李", "王", "刘", "陈", "杨", "赵", "黄", "周", "吴",
    "徐", "孙", "胡", "朱", "高", "林", "何", "郭", "马", "罗",
    "梁", "宋", "郑", "谢", "宋", "唐", "韩", "郑", "吴", "徐",
    "吕", "张", "朱", "刘", "陈", "杨", "赵", "黄", "周", "吴",
    "徐", "孙", "胡", "朱", "高", "林", "何", "郭", "马", "罗",
    "阿", "奥", "邓", "鄂", "お", "ま"
  ];
  function firstName () {
    return names[Math.floor(Math.random() * names.length)]
  }

  function lastName (i) {
    return String.fromCharCode(0x4e00 + (i * 2)) + names[Math.floor(Math.random() * names.length)]
  }

  return Array.from({ length: number }, (v, i) => {
    return {
      id: getUUID(),
      name: firstName() + lastName(i)
    }
  })

}


/**
 * 获取汉字首字母
 * @param {*} str 汉字
 */
export function initialLetter (str) {
  return pinyin.getFullChars(str)?.substring(0, 1)
}

二、开始

这个组件，只要完成两个任务就算完成了：1、点击右侧字母导航栏，滚动到相应位置。2、鼠标滚动到相应位置，右侧字母导航栏的选中项也相应改变。

0、布局，初始化数据

       组件初始代码：

<template>
  <div class="contacts">
    <div class="contacts-list">
      <el-checkbox-group v-model="checkList">
        <div
          class="key-group"
          v-for="(value, key, index) in groupData"
          :key="index"
        >
          <div class="group-title" :id="key">{{ key }}</div>
          <div class="checkbox-ul">
            <el-checkbox
              :label="item.name"
              v-for="item in value"
              :key="item.id"
            ></el-checkbox>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="contacts-nav">
      <span
        v-for="letter in lettersArr"
        :key="letter"
        :class="[letter, current === letter ? 'active' : '']"
        @click="onChange(letter)"
        >{{ letter }}</span
      >
    </div>
  </div>
</template>
<script>
import { getLetters, initialLetter } from "@/utils"
let that
export default {
  name: "ContactsList",
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      lettersArr: getLetters(),// 右侧导航字母
      current: "A",// 默认选中的字母
      checkList: [],// 通讯簿选中的数据
      groupData: null,// 通讯簿数据
    }
  },
  methods: {
    setGroupData() {
      let resultList = {}
      let group = this.list.reduce((t, v) => {
        let initial = initialLetter(v.name)
        initial = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(initial) ? initial : "#"
        if (t[initial]) {
          t[initial].push(v)
        } else {
          t[initial] = [v]
        }
        return t
      }, {})
      // 排序
      this.lettersArr.forEach((item) => {
        if (group[item]) {
          resultList[item] = group[item]
        }
      })
      this.groupData = resultList
    },
    // 点击右侧导航字母
    onChange(letter) {},
  },
  mounted() {
    this.setGroupData()
  },
}
</script>
<style lang="scss" scoped>
.contacts {
  width: 380px;
  height: 500px;
  display: flex;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  box-sizing: border-box;
  &-list {
    position: relative;
    flex: 1;
    padding: 12px 10px;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .key-group {
      margin-bottom: 20px;
      .group-title {
        position: relative;
        color: #cec7d0;
        font-size: 14px;
        &::after {
          content: " ";
          position: absolute;
          top: 50%;
          left: 20px;
          width: calc(100% - 26px);
          height: 1px;
          background-color: #cec7d0;
        }
      }
      .checkbox-ul {
        display: flex;
        flex-direction: column;
        .el-checkbox {
          padding: 2px 5px;
          border-radius: 4px;
          margin-right: 0;
          &:hover {
            background-color: #f7f4f8;
          }
        }
      }
    }
  }
  &-nav {
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    width: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #cec7d0;
    cursor: pointer;
    .active {
      color: #0052cc;
    }
  }
}
</style>

组件调用：

<template>
  <div class="contacts-page">
    <contacts-list :list="list" />
  </div>
</template>
<script>
import { generateRandomName } from "@/utils/methods"
import ContactsList from "@/components/ContactsList"
export default {
  name: "ContactsPage",
  data() {
    return {
      list: generateRandomName(200)
    }
  },
  components: { ContactsList }
}
</script>
<style lang="scss" scoped>
.contacts-page {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #aaa8a8;
}
</style>


// generateRandomName 函数可生成假数据，格式如下：
[{id:'123',name:'张三'},{id:'456',name:'李四'}]



// setGroupData 函数可把上面的数据按拼音首字母分组，格式如下（如果不属于字母，归类于#号）：
{
    A:[{id:'001',name:'埃勒苏'},{id:'009',name:'阿勒苏'}],
    B:[{id:'008',name:'布达拉'}],
    #:[{id:'007',name:'お小日'}]
}

如上，我们就把展示和样式和数据写好了，接下来专心于逻辑即可。

1、点击右侧字母导航栏，滚动到相应位置

（这个可以有很多种写法，比如在渲染完成后获得每一个数据组距离顶部的距离，保存在数组，点击导航字母滚动相应的距离数即可。使用锚链接，给每个数据组盒子一个id，用a链接或者window.location.hash跳转到这个id即可，这不是一个好方法，这里仅做demo展示。）

给右侧字母导航盒子加上如下点击事件即可：

// 切换到指定字母区域
    onChange(letter) {
      this.current = letter
      if (Object.keys(this.groupData).includes(letter)) {
        window.location.hash = `#${letter}`
      }
    },

2、鼠标滚动到相应位置，右侧字母导航栏的选中项也相应改变

（在用for循环生成数据组的时候，我们给了每个数据组的盒子一个id，我们只需要在滚动到某个数据组盒子的时候，更新右侧导航字母选中值即可。）

HTML5给我们提供了一个构造函数（IntersectionObserver），它可以监测一个元素随着滚动条的滚动有没有进入到另一个元素内(和元素重叠)。

我们在组件的methods内定义这个函数：


observer() {
      const obArr = document.querySelectorAll(".group-title")
      // 建立观察者,第一个参数是一个函数，代表重叠了要做什么
      this.ob = new IntersectionObserver(fn, {
        root: document.querySelector(".contacts"), // 填root:null或者直接不传这个参数的话，就代表以可视窗口为参考
        thresholds: 1, // 取值为0-1之间，代表观察元素进入到参考元素的哪个位置时触发，0.1是刚刚开始，0.5是进入一半，1是完全进入
        rootMargin: "300px 0px" // 上中下右，rootMargin扩大了元素的感知范围，如果为100px，说明元素距离交叉位置还有100px就代表已交叉，如果为-100px，代表元素超过交叉范围100px才算交叉，一般用正值，如图片预加载等等，及图片还没到可视区域，先加载出来
      })
      // 观察
      obArr.forEach((el) => {
        this.ob.observe(el)
      })
      function fn(entries) {
        // console.log(entries[0].isIntersecting); // 离开时为false，进入时为true（进入视口区域时是true，离开视口区域时是false。注意，刚开始加载时会触发一次，是false）
        if ( entries[0].isIntersecting) {
          that.current = entries[0].target.id
        }
      }
    }

在mounted中调用函数：

mounted() {
    this.setGroupData()
    this.$nextTick(() => {
      that = this
      this.observer()
    })
  },

在beforeDestroy生命周期取消监听：

beforeDestroy() {
    // 取消监听
    if (this.ob) {
      this.ob.disconnect()
    }
  }

三、完整代码

0、组件调用代码：

<template>
  <div class="contacts-page">
    <contacts-list :list="list" />
  </div>
</template>
<script>
import { generateRandomName } from "@/utils"
import ContactsList from "@/components/ContactsList"
export default {
  name: "ContactsPage",
  data() {
    return {
      list: generateRandomName(200)
    }
  },
  components: { ContactsList }
}
</script>
<style lang="scss" scoped>
.contacts-page {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #aaa8a8;
}
</style>

1、组件代码：

<template>
  <div class="contacts">
    <div class="contacts-list">
      <el-checkbox-group v-model="checkList">
        <div
          class="key-group"
          v-for="(value, key, index) in groupData"
          :key="index"
        >
          <div class="group-title" :id="key">{{ key }}</div>
          <div class="checkbox-ul">
            <el-checkbox
              :label="item.name"
              v-for="item in value"
              :key="item.id"
            ></el-checkbox>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="contacts-nav">
      <span
        v-for="letter in lettersArr"
        :key="letter"
        :class="[letter, current === letter ? 'active' : '']"
        @click="onChange(letter)"
        >{{ letter }}</span
      >
    </div>
  </div>
</template>
<script>
import { getLetters, initialLetter } from "@/utils"
let that
export default {
  name: "ContactsList",
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      lettersArr: getLetters(),
      current: "A",
      checkList: [],
      groupData: null,
      ob: null
    }
  },
  methods: {
    setGroupData() {
      let resultList = {}
      let group = this.list.reduce((t, v) => {
        let initial = initialLetter(v.name)
        initial = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(initial) ? initial : "#"
        if (t[initial]) {
          t[initial].push(v)
        } else {
          t[initial] = [v]
        }
        return t
      }, {})
      // 排序
      this.lettersArr.forEach((item) => {
        if (group[item]) {
          resultList[item] = group[item]
        }
      })
      this.groupData = resultList
    },
    // 切换到指定字母区域
    onChange(letter) {
      this.current = letter
      if (Object.keys(this.groupData).includes(letter)) {
        window.location.hash = `#${letter}`
      }
    },
    observer() {
      const obArr = document.querySelectorAll(".group-title")
      // 建立观察者,第一个参数是一个函数，代表重叠了要做什么
      this.ob = new IntersectionObserver(fn, {
        root: document.querySelector(".contacts"), // 填root:null或者直接不传这个参数的话，就代表以可视窗口为参考
        thresholds: 1, // 取值为0-1之间，代表观察元素进入到参考元素的哪个位置时触发，0.1是刚刚开始，0.5是进入一半，1是完全进入
        rootMargin: "300px 0px" // 上中下右，rootMargin扩大了元素的感知范围，如果为100px，说明元素距离交叉位置还有100px就代表已交叉，如果为-100px，代表元素超过交叉范围100px才算交叉，一般用正值，如图片预加载等等，及图片还没到可视区域，先加载出来
      })
      // 观察
      obArr.forEach((el) => {
        this.ob.observe(el)
      })
      function fn(entries) {
        // console.log(entries[0].isIntersecting); // 离开时为false，进入时为true（进入视口区域时是true，离开视口区域时是false。注意，刚开始加载时会触发一次，是false）
        if ( entries[0].isIntersecting) {
          that.current = entries[0].target.id
        }
      }
    }
  },
  mounted() {
    this.setGroupData()
    this.$nextTick(() => {
      that = this
      this.observer()
    })
  },
  beforeDestroy() {
    // 取消监听
    if (this.ob) {
      this.ob.disconnect()
    }
  }
}
</script>
<style lang="scss" scoped>
.contacts {
  width: 380px;
  height: 500px;
  display: flex;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  box-sizing: border-box;
  &-list {
    position: relative;
    flex: 1;
    padding: 12px 10px;
    height: 100%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .key-group {
      margin-bottom: 20px;
      .group-title {
        position: relative;
        color: #cec7d0;
        font-size: 14px;
        &::after {
          content: " ";
          position: absolute;
          top: 50%;
          left: 20px;
          width: calc(100% - 26px);
          height: 1px;
          background-color: #cec7d0;
        }
      }
      .checkbox-ul {
        display: flex;
        flex-direction: column;
        .el-checkbox {
          padding: 2px 5px;
          border-radius: 4px;
          margin-right: 0;
          &:hover {
            background-color: #f7f4f8;
          }
        }
      }
    }
  }
  &-nav {
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    width: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #cec7d0;
    cursor: pointer;
    .active {
      color: #0052cc;
    }
  }
}
</style>

以上，把代码复制可直接运行demo。

在生产环境中在完成第一步时，不建议直接使用锚链接window.location.hash跳转到相应位置。如果使用的框架是vue或者react，路由使用的是hash Router，那么url就会和路由有冲突。而且这种滚动只能让盒子贴到组件的顶部，如果说想点击导航字母"C"，让C组数据滚动到组件中部，这种方法就做不到，不够灵活。可以考虑使用自己控制滚动距离的方式。

Lemon Flower
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-li:一个Vue.js组件，可以使用Intersection Observer延迟加载图像
03-19
v懒惰图像 一个Vue.js组件，可以在使用进入视口时自动延迟加载图像。 你知道吗？在这里，您可以以简洁的格式学习有关Vue.js生态系统的提示，非常适合忙碌的开发人员！ :unicorn: 演示版 ， ， 用法 npm install v-lazy-image 警告：如果您要针对不支持该浏览器的浏览器，则需要安装 。 您可以全局注册该组件，以便在所有应用程序中都可以使用该组件： import Vue from "vue" ; import { VLazyImagePlugin } from "v-lazy-image" ; Vue . use ( VLazyImagePlugin ) ; 或在您的任何组件中本地使用它： import VLazyImage from "v-lazy-image" ; export default { components : { VLazyImage
如何使用 IntersectionObserver API 来实现数据的懒加载？（以 Vue3 为例）
weixin_42650595的博客
01-05 2950
使用 IntersectionObserver 来实现数据的懒加载
vue3.0实现数据懒加载
^_^
07-19 3115
技术手段 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver 核心API ：Intersection Observer（H5新增，不支持ie） 在没有这方法前使用Element.getBoundingClientRect() 1.为什么使用数据懒加载？ 以上面图参考，如果不使用数据懒加载，当用户还没滑到不可见区域时，数据已经请求回来了，如果一个完整的项目，数据是非常多的，请求了很多没有必要的数据，我们想要的效果是 页面滑到哪里，就应该请求相对于...
vue3的生命周期钩子 IntersectionObserver
u013557716的博客
01-25 559
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。console.log(isIntersecting) // true为dom元素到达可视区域,false为没有到达。observer.unobserve(tarage.value)// 停止观察。<h3 ref ="tarage"> 我是需要获取到的ref</h3><h2>我是主页</h2>
vue3的生命周期钩子与IntersectionObserver及自定义指令
m0_62823653的博客
07-04 1128
第二部分：IntersectionObserverAPI 在移动端，有个很重要的概念，叫做懒加载，适用于一些图片资源特别多，数据特别多的页面中，经常会有动态加载数据的场景中，这个时候，我们通常是使用监听，元素是否进入视图，其中由于其特别大的计算量，会有性能问题接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为根 (root)。 是当被监听元素的可见性
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
vue 使用eventBus实现同级组件的通讯
08-27
Vue 使用 EventBus 实现同级组件的通讯 Vue.js 是一个流行的前端框架，它提供了多种方式来实现组件之间的通讯，其中之一就是使用 EventBus。EventBus 是一个中央事件总线，允许组件之间相互通讯。今天，我们将学习...
vue实现验证码输入框组件
08-28
在这个示例中，我们使用 Vue 组件来实现验证码输入框组件。我们定义了 `SecurityCode` 组件，并在模板中使用 `<div>` 元素来包围整个组件。然后，我们使用 `<label>` 元素来关联输入框和验证码显示区域，并使用 `v-...
vue 通过下拉框组件学习vue中的父子通讯
08-28
这篇文章主要介绍了 Vue 通过下拉框组件学习 Vue 中的父子通讯的相关知识，涵盖了父组件和子组件的实现代码。 在 Vue 中，父子组件之间的通讯主要通过两种方式实现： props 和 emit。 props 是父组件将数据传递给...
【new IntersectionObserver】vue3 数据懒加载
sandwich_99的博客
11-01 334
通过监视底部节点可视情况，获取新数据进行渲染，如果获取不到最新数据则显示暂无其他数据
关于解构赋值和vue3中的useIntersectionObserver
melissaomy的博客
12-26 232
在解构赋值时遇到的知识点
vue3中的组件数据懒加载useIntersectionObserver
haodanzj的博客
09-14 2564
官方文档 首页主体-组件数据懒加载 目的： 实现当组件进入可视区域在加载数据。 我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。 大致步骤： 理解 useIntersectionObserver 的使用，各个参数的含义 改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法 封装 useLazyData 函数，作为数.
vue3通过IntersectionObserver实现图片懒加载
最新发布
sfumato的博客
03-01 524
加载前： 加载后：
使用IntersectionObserver实现触底加载（vue）
oldmoonz的博客
04-13 500
封装loadmore组件 template> <div v-if="!has_more">暂无更多数据</div> <div class="load_more" v-else>加载中</div> </template> <script lang="ts"> import { defineComponent, ref, watch } from 'vue'; export default defineComponent
vue3 useIntersectionObserver滚动时实现数据加载
deng_zhihao692817的专栏
07-04 596
【代码】vue3 useIntersectionObserver滚动时实现数据加载。
Vue使用IntersectionObserver实现数据的懒加载
qq_45560350的博客
07-11 1038
MDN上的介绍Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法，Intersection Observer API 会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行注意，初始化监听目标元素时，回调函数就会触发一次。
veu3组合式api结合vueUse的useIntersectionObserver实现el-table的某一列的数据请求的接口懒加载
weixin_60886885的博客
05-10 330
接口懒加载
基于vue3.0和IntersectionObserver封装懒加载指令
qq_46343149的博客
05-02 586
目的：当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。
vue3使用IntersectionObserver属性结合 自定义指令 实现图片懒加载
qq_35438952的博客
10-27 375
图片懒加载简介使用版本，含显示动画
vue3 使用intersectionobserver实现懒加载
06-09
Vue 3 中可以使用 Intersection Observer API 来实现懒加载。Intersection Observer API 可以观察一个元素是否进入了视口（viewport）或者离开了视口。 首先，你需要创建一个指令来实现懒加载： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值