父子组件滚动控制

假设子组件在父组件的底部,父子组件都是scroll-view,父组件滚动到底部之后才可以滚动子组件,子组件滚动到顶部之后才可以滚动父组件,子组件滚动时父组件不动,父组件滚动时子组件跟着同步滚动。

父组件上设置bindscroll="scrollChild"监听滚动事件,父组件设置属性childScroll来控制子组件是否可以滚动,子组件接收childScroll作为scroll-y的值来控制自己的滚动与否

scrollChild(e){
    // 设置定时器一个原因是防抖,
    // 另一个原因是scroll事件在滑动时自身做了节流,滑动停下的那一刻不一定触发了scroll事件,通过定时器延迟40ms基本可以等到滑动停下的那一刻(除非你的手速快到单身20年)
    // 等到停下的时候再通过下列方法获取子组件的位置就可以判断父组件是否滚动到底部了,从而控制子组件的滚动与否
    this.otherData.scrollTimer && clearTimeout(this.otherData.scrollTimer);
    this.otherData.scrollTimer = setTimeout(() => {
      let query = wx.createSelectorQuery().in(this)
      query.select('#child').boundingClientRect((res) => {
        if(res.top>0){
          this.setData({
            childScroll: false,
          })
        } else {
          this.setData({
            childScroll: true,
          })
        }
      }).exec()
    },40)
  },
posted @ 2021-04-15 13:09  木-鱼  阅读(729)  评论(0)    收藏  举报