watch中的scrollY(newY)和diff(newVal)问题

来源:5-10 listview 基础组件的开发和应用-滚动固定标题实现(下)

错爱谁

2018-01-22

scrollY(newY) {
        const listHeight = this.listHeight
        // 当滚动到顶部,newY>0
        if (newY > 0) {
          this.currentIndex = 0
          return
        }
        // 在中间部分滚动
        for (let i = 0; i < listHeight.length - 1; i++) {
          let height1 = listHeight[i]
          let height2 = listHeight[i + 1]
          if (-newY >= height1 && -newY < height2) {
            this.currentIndex = i
            this.diff = height2 + newY
            return
          }
        }
        // 当滚动到底部,且-newY大于最后一个元素的上限
        this.currentIndex = listHeight.length - 2
      },
      diff(newVal) {
        let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
        console.log(fixedTop)
        if (this.fixedTop === fixedTop) {
          return
        }
        this.fixedTop = fixedTop
        this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
      }

老师,我想知道scrollY(newY)和diff(newVal)中newY和newVal分别是什么?

我通过console.log(newY)发现是

scroll(pos) {
        this.scrollY = pos.y
      }

console.log(newVal)是

this.diff = height2 + newY

scroll是通过better-scroll派发的  

滚动的时候通过scroll事件改变scrollY的值,从而在watch中监听

那newY和newVal就是变化的值  不知道我这样理解对不对? 

写回答

1回答

ustbhuangyi

2018-01-22

watch 的回调函数的第一个参数表示变化的新值

0
1
错爱谁
非常感谢!
2018-01-22
共1条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程