nuxt.js 进行项目重构-首页全部功能完成以及分类页的完成

最新推荐文章于 2023-11-08 06:05:49 发布

benlalagang

最新推荐文章于 2023-11-08 06:05:49 发布

阅读量1.5k

点赞数

分类专栏： nuxt Vue 文章标签：重构前端 html 1024程序员节

本文链接：https://blog.csdn.net/benlalagang/article/details/127476154

版权

Vue 同时被 2 个专栏收录

29 篇文章

订阅专栏

nuxt

6 篇文章

订阅专栏

本文介绍了如何利用防抖函数解决页面加载时由于图片等资源导致滚动高度频繁变化，从而影响用户体验的问题。通过在JavaScript中实现防抖函数，并使用mixin混入方式在多个页面复用，确保在指定时间内只执行一次刷新操作，提高页面性能。同时展示了在Vue中如何结合防抖函数监听商品图片加载完成后的滚动事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们要计算scroll 的可滚动高度、但当页面加载时（特别是加载出来图片）可滚动高度会一直变化、从而导致页面频繁出发事件影响体验

我们使用防抖函数来解决它

JS中防抖和节流_benlalagang的博客-CSDN博客_节流在指定时间内执行第一次还是最后一次https://blog.csdn.net/benlalagang/article/details/125580741?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166651246116800184176830%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166651246116800184176830&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-125580741-null-null.nonecase&utm_term=%E9%98%B2%E6%8A%96&spm=1018.2226.3001.4450通过 mixin 混入语法使得防抖工具函数可以在多个页面使用

在页面中引入使用：

mixins:[goodsimglisten],

static/mixin.js

function debounde(func,delay){
  //防止多次refresh 多次抖动
  //函数名字 传入参数和延迟时间
  let timer = null  //timer来记录有没有定时器
  return function (...args) {// args 泛指参数
    if (timer) clearTimeout(timer) //如果有之前的就清除它 再执行新的
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}


export  const goodsimglisten = {
  mounted(){
    const refresh = debounde(this.$refs.scroll.refresh,100)
    this.goodsimglisten=()=>{
      refresh()
    }
    this.$bus.$on('goodsimgload',this.goodsimglisten)
  },
  data(){
    return{
      goodsimglisten:null
    }
  }
}

分类页

在router.js 路由表中配置好组件和路径

分类页整体页面布局比较简单头部navtop 左边导航按钮右边展示区

头部还是通用组件 navTop

左边按钮和右边内容列表都外包一层 scroll 组件

样式一定要给上高度 才能根据计算出 超乎距离的滚动
.cbtn-scroll{
  background: #f5f5f5;
  height:calc(100vh - 49px);
  overflow: hidden;
  width: 28%;
  float: left;
}

.con-scroll{
  background: #fff;
  height:calc(100vh - 49px);
  overflow: hidden;
  width: 72%;
  float: right;
  box-sizing: border-box;
  padding: 0px 12px;
}

联动切换效果和首页切换商品分类一致

都是子组件改变样式发射事件传输索引值父组件根据索引值改变右侧的数据展示

子组件根据索引动态改变样式并发射自定义事件出去：并且切换时滚动距离切换到最顶部

bianse(index) {
  this.currentIndex=index;
  this.$emit('clickclass',index)//
}

父组件根据索引值匹配数据

clickclass(index){
  switch (index) {
    case 0:
      this.classe="guanli"
      break
    case 1:
      this.classe="fagui"
      break
    case 2:
      this.classe="jingji"
      break
    case 3:
      this.classe="jianzhu"
      break
    case 4:
      this.classe="shizheng"
      break
    case 5:
      this.classe="jidian"
      break
    case 6:
      this.classe="gonglu"
      break
    case 7:
      this.classe="shuili"
      break
  }
  this.$refs.conscroll.scrollTo(0,0,0)
},