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

我们要计算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)
},