【复盘】转行小白历险记 饿了么轮播图 OpSwipe 组件

发布时间:2023年12月21日

一、组件解析

01OpSwipe 组件的主要功能和用途。

  • 它主要用于在网页或移动应用中展示一系列的内容(如图片、卡片等)通过滑动的方式
  • 如上图所示

--主要功能

  • 滑动轮播

    • 允许用户通过触摸滑动(在移动设备上)或鼠标拖动(在桌面设备上)来浏览轮播项。
  • 自动播放

    • 组件支持自动播放功能,自动切换轮播项,适用于展示幻灯片或广告。
  • 循环播放

    • 支持循环滑动,当滑动到最后一个轮播项后,可以继续滑动回到第一个轮播项。
  • 响应式和触摸友好

    • 组件设计为响应式,适应不同屏幕尺寸和设备。
    • 优化了触摸操作的响应,提供平滑的触摸滑动体验。
  • 定制化

    • 支持多种自定义选项,如自动播放间隔、轮播方向、是否显示指示器等。
  • 动态样式和指示器

    • 动态计算轨道样式和大小,支持水平或垂直方向的滑动。
    • 显示指示器以指出当前轮播项。
  • 内容展示:适用于显示图片集、广告、新闻头条、产品展示等。
  • 交互增强:在用户界面中添加交互元素,提高用户参与度。
  • 空间节约:在有限的空间内展示更多内容。
  • 网站和应用特色:作为网站或应用的特色元素,提升视觉吸引力。

02这个组件是如何实现滑动功能的?

  • 滑动功能主要通过处理触摸事件(在移动设备上)和可能的鼠标事件(在桌面设备上)来实现

1. 触摸事件监听

  • 组件使用了自定义的 useTouch 钩子来处理触摸事件。
  • onTouchStart, onTouchMove, 和 onTouchEnd 事件被用来监听用户的触摸操作。

2. 记录触摸起始点

  • 在用户开始触摸(touchstart)时,start 方法记录触摸的起始点。

3. 计算位移

  • 当用户在屏幕上滑动(touchmove)时,move 方法计算用户手指从起始点到当前点的水平(deltaX)和垂直(deltaY)位移。

4. 更新组件状态

  • 根据计算出的位移更新组件的状态,如轨道的偏移量(state.offset)。

5. 动态样式应用

  • 利用 Vue 的计算属性(computed),动态计算轨道元素(track)的样式,特别是 transform 属性,来反映位移的改变。
  • 这使得轨道元素可以随着用户的触摸移动而移动。

6. 滑动结束和位置校正

  • 当用户停止触摸(touchend)时,根据最终的位移判断是否切换到下一个轮播项或回到当前轮播项。
  • correctPosition 方法可能被用于校正轨道的位置,确保滑动结束后轨道处于适当的位置。

7. 自动播放逻辑

  • 如果启用了自动播放(autoplay),则定时自动更新轨道的偏移量来实现轮播。

8. 循环播放处理

  • 如果启用了循环播放(loop),在达到轮播列表的开始或结束时,适当调整轨道偏移量以实现无缝循环。

二、Vue 3特性

  • 01这个组件使用了 Vue 3 的哪些新特性?请举例说明它们的用途。

    • 1. 组合式 API

      • refreactive
        • 这些是 Vue 3 引入的响应式引用和响应式状态管理的核心函数。ref 用于定义一个响应式的引用,而 reactive 用于创建一个响应式的对象。
        • OpSwipe 组件中,refreactive 被用来定义和管理组件的内部状态,如 root, track, state 等。
    • 2.生命周期钩子

      • Vue 3 提供了组合式 API 下的生命周期钩子,如 onMountedonBeforeUnmount
      • onMounted 在组件挂载后执行初始化操作,而 onBeforeUnmount 在组件卸载前执行清理操作。
    • 3.自定义组合式函数

      • Vue 3 鼓励开发者创建自定义的组合式函数来封装和重用逻辑。
      • useTouch 是一个自定义钩子,封装了触摸事件处理逻辑,增强了组件的交互能力。
  • 02你能解释一下什么是组合式 API,以及它与 Vue 2 的选项式 API 有何不同吗?

????????特点
  1. 基于函数:使用一系列的函数(如 ref, reactive, computed, watch, setup 等)来创建和管理响应式状态和副作用。

  2. 逻辑重用与组织:允许开发者更自然地将相关功能逻辑组合在一起,而不是分散在一个组件的不同选项中(如 data, methods, computed 等)。

  3. 更好的类型推断:与 TypeScript 的集成更加紧密,为复杂组件提供更好的类型推断支持。

  4. 适用于大型项目:在大型项目或复杂组件中,使代码更易于维护和理解。

import { ref, computed, watch, setup } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    watch(count, (newValue, oldValue) => {
      // 响应 count 的变化
    });

    function increment() {
      count.value++;
    }

    return { count, doubled, increment };
  }
};

?03在这个组件中,reactiveref 是如何被用来管理状态的?

3.1使用 ref

ref 用于定义一个响应式的引用,它通常用于单个值,如字符串、数字、布尔值等。在组件内,ref 被用来跟踪 DOM 元素或组件的引用,以及定义简单的响应式数据。

OpSwipe 中的应用:
  • 跟踪 DOM 元素

const root = ref();
const track = ref();
  • 这里,roottrack 被用来引用组件模板中的 DOM 元素。这些引用后续可用于直接访问和操作这些元素,如获取它们的尺寸或应用动态样式。

  • 定义响应式数据: 例如,如果在组件中需要跟踪一个数字或字符串,可以使用 ref 来定义这样的响应式数据。

3.2使用 reactive

reactive 用于创建一个响应式对象,它适用于更复杂的结构,如对象或数组。在 reactive 对象中定义的所有属性都是响应式的。

OpSwipe 中的应用:

????????定义组件状态

const state = reactive({
  rect: null,
  offset: 0,
  width: 0,
  height: 0,
  active: 0,
  swiping: false,
});

?这里,state 是一个响应式对象,包含组件的多个状态属性。例如,offset 用于跟踪轨道的当前偏移量,active 用于记录当前活动的轮播项索引,等等。这些状态的变化会自动触发组件的重新渲染。

总结

?在 OpSwipe 组件中,refreactive 是用来定义和管理组件内的响应式状态的ref 用于单个值或DOM元素引用,而 reactive 用于包含多个属性的复杂对象。这些响应式状态的变化能够触发组件视图的更新,从而实现动态的用户界面。通过组合式 API,OpSwipe 组件能够以更灵活和组织化的方式管理其内部状态和逻辑。

04createNamespacebem 函数的作用

  • ????保证 CSS 类名的唯一性和一致性。
  • 提高 CSS 的可维护性和可读性。
  • 使得样式更容易模块化和复用。

文章来源:https://blog.csdn.net/TTTT2222111/article/details/135047040
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。