文章目录

• • 22-首页主体-补充-vue动画
  • 23-首页主体-面板骨架效果
  • 24-首页主体-组件数据懒加载
  • 25-首页主体-热门品牌

22-首页主体-补充-vue动画

目标： 知道vue中如何使用动画，知道Transition组件使用。

当vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。

如果元素或组件离开，完成一个淡出效果：

100

.fade-leave {opacity: 1
}
.fade-leave-active {transition: all 1s;
}
.fade-leave-to {opcaity: 0
}

• 进入（显示，创建）
  • v-enter 进入前 （vue3.0 v-enter-from）
  • v-enter-active 进入中
  • v-enter-to 进入后
• 离开（隐藏，移除）
  • v-leave 进入前 （vue3.0 v-leave-from）
  • v-leave-active 进入中
  • v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

23-首页主体-面板骨架效果

目的： 加上面板的骨架加载效果

定义一个骨架布局组件：

src/views/home/components/home-skeleton.vue

在 home-hot home-new 组件分别使用

  
+    

+      
+        
{{item.title}}
{{item.alt}}
+         
+      
+    

在 src/assets/styles/common.less 定义动画

.fade{&-leave {&-active {position: absolute;width: 100%;transition: opacity .5s .2s;z-index: 1;}&-to {opacity: 0;}}
}

注意：

• 动画的父容器需要是定位，防止定位跑偏。

24-首页主体-组件数据懒加载

目的： 实现当组件进入可视区域在加载数据。

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。

大致步骤：

• 理解 useIntersectionObserver 的使用，各个参数的含义
• 改造 home-new 组件成为数据懒加载，掌握 useIntersectionObserver 函数的用法
• 封装 useLazyData 函数，作为数据懒加载公用函数
• 把 home-new 和 home-hot 改造成懒加载方式

落的代码：

1.先分析下这个useIntersectionObserver 函数：

// stop 是停止观察是否进入或移出可视区域的行为    
const { stop } = useIntersectionObserver(// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象target,// isIntersecting 是否进入可视区域，true是进入 false是移出// observerElement 被观察的dom([{ isIntersecting }], observerElement) => {// 在此处可根据isIntersecting来判断，然后做业务},
)

2.开始改造 home-new 组件：src/views/home/components/home-new.vue

• 进入可视区后获取数据

// 省略。。。

3.由于首页面板数据加载都需要实现懒数据加载，所以封装一个钩子函数，得到数据。
src/hooks/index.js

// hooks 封装逻辑，提供响应式数据。
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData = (apiFn) => {// 需要// 1. 被观察的对象// 2. 不同的API函数const target = ref(null)const result = ref([])const { stop } = useIntersectionObserver(target,([{ isIntersecting }], observerElement) => {if (isIntersecting) {stop()// 调用API获取数据apiFn().then(data => {result.value = data.result})}})// 返回--->数据（dom,后台数据）return { target, result }
}

4.再次改造 home-new 组件：src/views/home/components/home-new.vue

import { findNew } from '@/api/home'
+import { useLazyData } from '@/hooks'
export default {name: 'HomeNew',components: { HomePanel, HomeSkeleton },setup () {
+    const { target, result } = useLazyData(findNew)
+    return { goods: result, target }}
}

+ 

5.然后改造 home-hot 组件：src/views/home/components/home-hot.vue

+  

import { findHot } from '@/api/home'
import HomePanel from './home-panel'
import HomeSkeleton from './home-skeleton'
+import { useLazyData } from '@/hooks'
export default {name: 'HomeHot',components: { HomePanel, HomeSkeleton },setup () {
+    const { target, result } = useLazyData(findHot)
+    return { target, list: result }}
}

25-首页主体-热门品牌

目的： 实现品牌的展示，和切换品牌效果。

基本步骤：

• 准备基础布局组件
• 获取数据实现渲染，完成切换效果
• 加上骨架效果和数据懒加载

落的代码：

.基础结构：src/views/home/components/home-brand.vue`

2.使用组件：src/views/home/index.vue

    
+    

+import HomeBrand from './components/home-brand'
export default {name: 'xtx-home-page',
+  components: { HomeCategory, HomeBanner, HomeNew, HomeHot, HomeBrand }
}

2.获取数据和切换效果：

• 由于最后会使用到数据懒加载，那么我们也会使用组合API实现。
• 业务上，只有两页数据切换，0—>1 或者 1—>0 的方式。

3.加上数据懒加载和骨架效果

  .skeleton {width: 100%;display: flex;.item {margin-right: 10px;&:nth-child(5n) {margin-right: 0;}}}

总结： 注意下useLazyData传参的情况。