滚动区域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)
}
判断是否为空