mall首页刷新

滚动区域bug的处理

1.出现原因，因为better-scroll在图片刷新时，由于图片加载速度的限制，导致最终的scrollheight不够，
2.解决办法，在每次图片刷新时，进行一次refresh（）操作。

• 如何将GoodsListItem.vue中的事件传入到Home.vue中
  • 因为涉及到非父子组件的通信, 所以这里我们选择了事件总线
    • bus ->总线
    • Vue.prototype.$bus = new Vue()
    • this.bus.emit(‘事件名称’, 参数)
    • this.bus.on(‘事件名称’, 回调函数(参数))

接受事件

但是这样写不好，可以在scroll里面定义刷新函数

• 问题一: refresh找不到的问题
  • 第一: 在Scroll.vue中, 调用this.scroll的方法之前, 判断this.scroll对象是否有值
  • 第二: 在mounted生命周期函数中使用 this.$refs.scroll而不是created中
• 问题二: 对于refresh非常频繁的问题, 进行防抖操作
  • 防抖debounce/节流throttle(课下研究一下)
  • 防抖函数起作用的过程:
    • 如果我们直接执行refresh, 那么refresh函数会被执行30次.
    • 可以将refresh函数传入到debounce函数中, 生成一个新的函数.
    • 之后在调用非常频繁的时候, 就使用新生成的函数.
    • 而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉

      debounce(func, delay) {
        let timer = null
        return function (...args) {
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => {
            func.apply(this, args)
          }, delay)
        }
      },

backtop按钮

监听组件必须用native

backtop的显示与隐藏

动态决定probeType，外面传入

这里的position是在scroll里面打印，但是我们需要在home中使用，这时需要使用emit传出这个事件，home中拿到这个事件进行监听

拿到事件后就可以动态决定组件的显示与隐藏了，

完成上拉加载更多

动态传入pullUpLoad

1.监听是否滚到底部的上拉事件了 ，再发射出去（pullingUp）



注意scroll默认只执行一次 所以要用finishPullUp

tabcontrol的吸顶效果

9.1. 获取到tabControl的offsetTop

• 必须知道滚动到多少时, 开始有吸顶效果, 这个时候就需要获取tabControl的offsetTop
• 但是, 如果直接在mounted中获取tabControl的offsetTop, 那么值是不正确.
• 如何获取正确的值了?
  • 监听HomeSwiper中img的加载完成.
  • 加载完成后, 发出事件, 在Home.vue中, 获取正确的值.
  • 补充:
    • 为了不让HomeSwiper多次发出事件,
    • 可以使用isLoad的变量进行状态的记录.
  • 注意: 这里不进行多次调用和debounce的区别
    
    
    
    

home离开时保持状态

滚动完后进行一次刷新

携带iid转跳到详情页

 <div class="goods-item" @click="itemClick">


   itemClick() {
        this.$router.push('/detail/' + this.goodsItem.iid)
      }

判断是否为空