scroll-view设置高度,下拉刷新不起作用

在小程序中,使用scroll-view实现下拉刷新

1.scroll-view需要给一个高度,用flex-grow:1不起作用,滚动会失效。
  • 解决方案:给scroll-view加一个父元素,设置flex-grow:1,在页面加载时获取父元素的高度,并且赋值给scroll-view
//初始化高度为0
  const [height, setHeight] = useState(0)

//获取父元素高度
    const query = Taro.createSelectorQuery()
    query.select('#main-wrap').boundingClientRect()
    query.exec((res) => {
      console.log(res)
      setHeight(res[0].height)
    })
//赋值给scroll-view
    <ScrollView
          refresherEnabled
          refresherDefaultStyle='none'
          refresherThreshold='50'
          refresherTriggered={trigger}
          onRefresherRefresh={refresh}
          onRefresherPulling={pulling}
          scrollY
          onScrollToLower={scrollToLower}
          className={styles['scroll-view']}
          style={{ height: height + 'px' }}
        >
          ...
 </ScrollView>
2.下拉刷新
  • 开启refresherEnabled属性
  • 如果像1中初始化height为0,则会出现下拉刷新不起作用,所以在初始化时,需要给一个固定的高度,且不能太小
  const [height, setHeight] = useState(672)
  • 下一步,将refresherTriggered绑定一个trigger值,
    onRefresherRefresh绑定一个refresh回调函数,来改变trigger值,控制刷新的动画,这里用一个定时器来模仿请求,请求完成时将trigger置为false
  // 触发刷新
  const refresh = (e) => {
    setTrigger(true)
    setTimeout(() => {
      setTrigger(false)
    }, 1000)
  }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。