vue电商项目归纳总结（1）

冷不防 2023-10-03 11:38 28阅读 0赞

**目录**

1.吸顶效果

2.组装数据

3.轮播图

--------------------

#### 1.吸顶效果 ####

--------------------

手写实现

思路：利用原生js的API和css的固定定位样式实现吸顶

--------------------

**核心步骤：**

**01.获取滚动条滚动距离**

document.documentElement.scrollTop

**02. 事件监听**

window.addEventListener('scroll', update)

**03.先写一个类名使用固定定位及在钩子函数里监听和销毁**

--------------------

04简单的代码实现：

<template>
    <nav><div :class="{show:y>78}">测试吸顶效果</div></nav>
    </template>
    <script>
    import { onMounted, onUnmounted, ref } from 'vue'
    export default {
      setup () {
        // 定义一个响应式数据
        const y = ref(0)
        const update = () => {
          y.value = document.documentElement.scrollTop
          console.log(y.value) // Y 获取滚动距离
        }
         //钩子函数（dom）页面加载时监听滚动距离
        onMounted(() => { window.addEventListener('scroll', update) })
           //钩子函数销毁定时器
        onUnmounted(() => { window.removeEventListener('scroll', update) })
        return { y }
      }
    }
    </script>
    <style scoped>
    nav{
      height: 3000px;
    }
    div{
      display: none;
      height: 50px;
      border: orange;
      background-color: skyblue;
      text-align: center;
      font-size: 20px;
    }
    .aaa{
      display: block;
      height: 300px;
      background-color: skyblue;
    }
    
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

####  ####

#### **2.组装数据** ####

--------------------

业务场景:

利用v-for渲染的时候，有时候数据并不是只有一个数组，有可能是嵌套的，需要我们组装数据，如下图所示：

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1][]

--------------------

**思路****：写好我们想要的结构，然后一一赋值**

![20210722210416772.png][]

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2][]

**注意点：**1.map返回新数组list

2.起名（如id和name要和后台的数据对应）

3.拿到数据后v-for渲染，用然后children里面的数据 可以v-for item（父数据的每一项）

--------------------

#### 3.轮播图 ####

--------------------

**业务场景：**vue3手写轮播图

**思路：**

> 1.制作静态结构
> 
> 2.传入图片之后渲染（通过ajax获取）
> 
> 3.逻辑功能实现（渲染后的是静态的第一张图片）,需要实现自动轮播、鼠标进去离开暂停开启效果 ，清理定时器
> 
> 因为轮播图以后可能要用，所以注册全局组件（导入，在install里定义）
> 
> 引入轮播图组件，几个小按钮

总体来言，还算简单，放出各功能核心代码：

**自动轮播实现：利用v-for的下标和自己定义的变量相等时为true，控制样式（图片的显示隐藏）**

let timer = null
    +    const autoPlayFn = () => {
    +      clearInterval(timer)
    +      timer = setInterval(() => {
    +        index.value++
    +        if (index.value >= props.sliders.length) {
    +          index.value = 0
    +        }
    +      }, props.duration)
    +    }
    +    watch(() => props.sliders, (newVal) => {
    +      // 有数据&开启自动播放，才调用自动播放函数
    +      if (newVal.length && props.autoPlay) {
    +        index.value = 0
    +        autoPlayFn()
    +      }
    +    }, { immediate: true })
    +

--------------------

**鼠标进入离开暂停 ：利用鼠标进入时间@mouseenter事件和@mouseleave事件控制定时器（清除）**

clearInterval(定时器ID)

--------------------

**销毁定时器：如果不销毁一直监听，容易出bug**

// 组件销毁，清理定时器
    onUnmounted(() => { clearInterval(timer)})

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021072220403127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210722210159273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[20210722210416772.png]: https://img-blog.csdnimg.cn/20210722210416772.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210722210428446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70