小兔鲜商03

这篇具有很好参考价值的文章主要介绍了小兔鲜商03。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

进入可视区加载数据:
首页有很多模块,如果一次性加载所有数据,很卡,,当移动到要显示的地方,才加载数据

使用 vueuse 库中 useIntersectionObserver方法,, 传入要监听的元素 target 和监听到这个target去加载的数据api,,, 返回api请求的数据

import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

/**
 * 懒加载组件数据,, 当组件进入可视区,再去加载
 * @param {Element} target  被监听的DOM
 * @param {Function} apiFn  发请求的api
 */
export const useLazyData = (target, apiFn) => {
  // api请求的数据
  const data = ref([])
  // stop停止观察
  const { stop } = useIntersectionObserver(
    // target 要监听的元素
    target, ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        // 进入可视区
        stop()
        apiFn().then(res => {
          data.value = res.result
        })
      }
    }, {
      // 触发的门槛,,只要相交就触发
      threshold: 0
    })

  return data
}

vue3中获取dom节点:
先声明一个响应式变量,,然后将这个响应式变量,指向你要绑定的节点


引入全局动画,,取名字为fade,,

小兔鲜商03,vue3
小兔鲜商03,vue3


有的函数,参数中需要传入另一个函数,,但是直接写函数名只能传入一个不带参数的函数,,可以用箭头函数返回一个带参数的函数

 const brands = useLazyData(target, () => findBrand(10))

img标签的事件:

  • load : 当图像成功加载并完全显示
  • error : 如果图像加载失败

图片懒加载:
监听图片是否进入可视区,,,先将图片src制空,等待图片进入可视区后,将图片的url赋值给src,,,加载图片
使用到的方法: IntersectionObserver 是浏览器原生提供的构造函数,,用来监听某个DOM是否进入可视区,,, ,返回一个observer监听器,,,

// 创建一个监听器
const observer = new IntersectionObserver(callback,options)

// 开始观察某个元素,, 可以同时观察多个
observer.observe(element1)
observer.observe(element2)
// 停止观察某个元素
observer.unobserve(xxx)

IntersectionObserver 中的参数:

  • callback : 监听触发的回调
    • callback的参数是一个数组,,因为可以同时监听多个元素,,每个元素都是一个IntersectionObserverEntry 对象,,这个对象中有很多属性,,比如: isIntersecting : 判断是否相交
  • options : 配置对象,,可以配置 threshold ,,触发的门槛,进入多少,触发
    小兔鲜商03,vue3

引用:https://blog.csdn.net/qq_38629292/article/details/127200527

图片懒加载,,自定义了一个指令: v-lazy

  • vue3 自定义指令,,, vue3中自定义指令的钩子和组件的钩子是一样的:
    mounted()钩子中:
    • 第一个参数: 当前指令的DOM
    • 第二个参数: binding : 是当前指令传入的值
import XtxSkeleton from '@/components/library/xtx-skeleton'
import XtxCarousel from '@/components/library/xtx-carousel'
import XtxMore from '@/components/library/xtx-more'
import defaultImg from '@/assets/images/default.png'
export default {
  install (app) {
    // 导入组件
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.directive('lazy', {
      mounted (el, binding) {
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 加载之后不观察,不能重复加载
            observer.unobserve(el)
            // 指定传递的参数
            const imgUrl = binding.value

            el.src = imgUrl
            // 图片加载失败,设置默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
          }
        }, {
          threshold: 0
        })

        // 观察这个元素
        observer.observe(el)
      }
    })
  }
}

面包屑组件:
vue中创建html内容方式:

  • el选项 直接绑定 html节点
  • template 选项
  • render() 函数动态渲染 ,, render中传入一个函数createElement 也可以写成 h , h(你要创建的标签,{标签的属性对象},z子节点)
    小兔鲜商03,vue3

小兔鲜商03,vue3
如果render存在,vue不会从template选项和el选项,创建指定元素,,而是使用render

获取组件插槽中的内容: this.$slots.default() , default表示获取的默认插槽,,默认插槽的名字叫default

面包屑组件: 使用render动态创建dom,,最后一个节点没有 箭头

问题

进入可视区加载数据文章来源地址https://www.toymoban.com/news/detail-694940.html

到了这里,关于小兔鲜商03的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 黑马程序员前端 Vue3 小兔鲜电商项目——(一)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月15日
    浏览(80)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(42)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第1篇:认识Vue3,1. Vue3组合式API体验【附代码文档】

    通过 Counter 案例 体验Vue3新引入的组合式API 特点: 代码量变少 分散式维护变成集中式维护 ![image.png]( create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应 ![image.png]( 前置条件 - 已安装16.0或更高版本的Node.js 执行如下命令,这一指

    2024年03月17日
    浏览(55)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇:什么是pinia,1. 创建空Vue项目【附代码文档】

    Pinia 是 Vue 的专属状态管理库,可以实现跨组件或页面共享状态,是 vuex 状态管理工具的替代品,和 Vuex相比,具备以下优势 提供更加简单的API (去掉了 mutation ) 提供符合组合式API风格的API (和 Vue3 新语法统一) 去掉了modules的概念,每一个store都是一个独立的模块 搭配

    2024年03月21日
    浏览(46)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(46)
  • 小兔鲜儿 - 推荐模块

    目录 动态获取数据 静态结构 获取页面参数​ 获取数据​ 类型声明 热门推荐 – 渲染页面和Tab交互  热门推荐 – 分页加载 热门推荐 – 分页条件 type 和 interface 的区别 type 和 interface 的相似之处 type 的特点和用途 interface 的特点和用途 何时使用 type 和 interface type 和 interfac

    2024年02月11日
    浏览(46)
  • 小兔鲜项目 uniapp (1)

    目录 项目架构 uni-app小兔鲜儿电商项目架构  小兔鲜儿电商课程安排 创建uni-app项目 1.通过HBuilderX创建 2.通过命令行创建 pages.json和tabBar案例 uni-app和原生小程序开发区别  用VS Code开发uni-app项目  拉取小兔鲜儿项目模板代码  基础架构–引入uni-ui组件库 操作步骤 安装类型声明

    2024年02月14日
    浏览(58)
  • css小兔鲜项目搭建

    目录 精灵图 精灵图的使用步骤 背景图片大小 background连写 文字阴影 盒子阴影 过渡 骨架标签 SEO三大标签 版心的介绍 css书写顺序  项目结构搭建 精灵图  场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图   优点:减少服务器发送次数,减轻服务器

    2024年02月09日
    浏览(39)
  • 小兔鲜儿-商城APP(静态网页)

    渲染:      1.快捷导航: !DOCTYPE html html lang=\\\"en\\\"   head     meta charset=\\\"UTF-8\\\" /     meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\" /     meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" /     meta       name=\\\"description\\\"       content=\\\"小兔鲜儿官网,致力于打造全球最大的食品、生鲜

    2024年02月11日
    浏览(39)
  • uniapp 小兔鲜儿 - 首页模块(2)

    目录 热门推荐 首页 – 热门推荐组件  首页 – 获取热门推荐数据 首页 – 热门推荐数据类型并渲染 猜你喜欢 首页 – 猜你喜欢组件 首页 – 获取猜你喜欢数据 首页 – 猜你喜欢数据类型和渲染 首页 – 猜你喜欢分页准备 首页 – 猜你喜欢分页加载  首页 – 猜你喜欢分页条

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包