下拉列表加载更多与滚动到特定条件显示搜索框

要先理解scrollTop和scrollHeight：

scrollTop：

scrollHeight：

scrollHeight<=scrollTop + clientHeight(当前客户端高度)

clientHeight(当前客户端高度)：

  const clientHeight = document.documentElement.clientHeight
  const scrollTop = document.documentElement.scrollTop
  const scrollHeight = document.documentElement.scrollHeight
  console.log(clientHeight,scrollTop,scrollHeight);

拉到底部

原来的方法要加上page++,home.js中

    async fetchHouselistData() {
      const res = await getHomehouselist(this.currentPage)
      this.houselist.push(...res.data)
      this.currentPage++
    }

这里调用下在home.vue

window.addEventListener('scroll',()=>{
  const clientHeight = document.documentElement.clientHeight
  const scrollTop = document.documentElement.scrollTop
  const scrollHeight = document.documentElement.scrollHeight
  console.log(clientHeight,scrollTop,scrollHeight);
  if(clientHeight + scrollTop >= scrollHeight){
    homeStore.fetchHouselistData()
  }
})

成功

但是离开页面时，需要移除监听，如果别的页面也要进行类似的监听，会产生重复的代码 移除监听: 这样封装

const scrollListenerHandler = () => {
  const clientHeight = document.documentElement.clientHeight
  const scrollTop = document.documentElement.scrollTop
  const scrollHeight = document.documentElement.scrollHeight
  console.log(clientHeight,scrollTop,scrollHeight);
  if(clientHeight + scrollTop >= scrollHeight){
    homeStore.fetchHouselistData()
  }
}
onMounted(() => {
  window.addEventListener('scroll',scrollListenerHandler)
})
onUnmounted(() => {
  window.removeEventListener('scroll',scrollListenerHandler)
})

// 将这段代码单独放进hooks中useScroll.js
// 传入回调方法
export default function useScroll(reachBottom) {
// 监听window窗口滚动
  const scrollListenerHandler = () => {
    const clientHeight = document.documentElement.clientHeight
    const scrollTop = document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight
    console.log(clientHeight, scrollTop, scrollHeight)
    if (clientHeight + scrollTop >= scrollHeight) {
      if(reachBottom) reachBottom()
    }
  }

  onMounted(() => {
    window.addEventListener('scroll', scrollListenerHandler)
  })
  onUnmounted(() => {
    window.removeEventListener('scroll', scrollListenerHandler)
  })
}

// home.vue
// 加载更多
 useScroll(() => {
   homeStore.fetchHouselistData()
 })

第二种方法,这种更推荐，通过变量控制

export default function useScroll() {
  // 监听window窗口滚动
  const isReachBottom = ref(false)
  const scrollListenerHandler = () => {
    const clientHeight = document.documentElement.clientHeight
    const scrollTop = document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight
    console.log(clientHeight, scrollTop, scrollHeight)
    if (clientHeight + scrollTop >= scrollHeight) {
      isReachBottom.value = true
    }
  }

  onMounted(() => {
    window.addEventListener('scroll', scrollListenerHandler)
  })
  onUnmounted(() => {
    window.removeEventListener('scroll', scrollListenerHandler)
  })

  return {isReachBottom}
}

//home.vue

const { isReachBottom } = useScroll()
watch(isReachBottom,(newValue) => {
  if(newValue){
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false
    })

  }
})

使用第三方节流函数，安装：

npm install underscore 导入

import { throttle } from 'underscore'

使用：1秒监听一次滚动

export default function useScroll() {
  // 监听window窗口滚动
  const isReachBottom = ref(false)
  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)
  const scrollListenerHandler = throttle(() => {
    clientHeight.value = document.documentElement.clientHeight
    scrollTop.value = document.documentElement.scrollTop
    scrollHeight.value = document.documentElement.scrollHeight
    console.log('监听到滚动')
    if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
      console.log('到底部了')
      isReachBottom.value = true
    }
  },1000) //这里设置时间

  onMounted(() => {
    window.addEventListener('scroll', scrollListenerHandler)
  })
  onUnmounted(() => {
    window.removeEventListener('scroll', scrollListenerHandler)
  })

  return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}

home.vue中

// 控制搜索框显示
// const isShowSearchBar = ref(false)
// watch(scrollTop,(newTop) => {
//   console.log(newTop);
//   isShowSearchBar.value = newTop > 100
// })
// 另外一种简洁的写法 而且有缓存 不用频繁调
const isShowSearchBar = computed(() => {
  return scrollTop.value >= 100
})