首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何改变ScrollView scrollTo滚动速度?

如何改变ScrollView scrollTo滚动速度?
EN

Stack Overflow用户
提问于 2016-03-16 12:25:52
回答 2查看 10K关注 0票数 15

我一直在使用Scrollview,它包含一个列表视图,其中包含页面指示符作为数字。当我单击它们时,我希望它们滚动,以便选定的数字位于中间。

喜欢

4 5 6 7 8 9

7是在这里选择的数字,当我点击这里9

滚动视图向左滚动,使该视图如

7 8 9 10 11

不过,我使用的是scrollTo(x : calculated , y : 0 , animated : true),但是滚动太慢了。我想要滚动是快速的或可控的参数,我已经尝试了持续时间在scrollTo,但这是行不通的。

EN

回答 2

Stack Overflow用户

发布于 2016-03-17 08:26:52

目前这是不可能的。scrollTo的调用会导致调用scrollResponderScrollTo,然后调用ios实现android实现。这将是必须实现滚动速度的点。

票数 11
EN

Stack Overflow用户

发布于 2020-06-16 06:34:18

这是一个非常简洁的解决方案,它使用滚动视图的内容高度来滚动整个视图(在挂载上)。但是,也可以使用相同的技巧(将侦听器添加到动画值)来创建滚动函数,该滚动函数可以在任何给定时刻(对任何给定值)由某个事件触发。

代码语言:javascript
运行
复制
import { useEffect, useRef, useState } from 'react'
import { Animated, Easing, ScrollView } from 'react-native'

const SlowAutoScroller = ({ children }) => {
  const scrollRef = useRef()
  const scrollAnimation = useRef(new Animated.Value(0))
  const [contentHeight, setContentHeight] = useState(0)

  useEffect(() => {
    scrollAnimation.current.addListener((animation) => {
      scrollRef.current &&
        scrollRef.current.scrollTo({
          y: animation.value,
          animated: false,
        })
    })

    if (contentHeight) {
      Animated.timing(scrollAnimation.current, {
        toValue: contentHeight,
        duration: contentHeight * 100,
        useNativeDriver: true,
        easing: Easing.linear,
      }).start()
    }
    return () => scrollAnimation.current.removeAllListeners()
  }, [contentHeight])

  return (
    <Animated.ScrollView
      ref={scrollRef}
      onContentSizeChange={(width, height) => {
        setContentHeight(height)
      }}
      onScrollBeginDrag={() => scrollAnimation.current.stopAnimation()}
    >
      {children}
    </Animated.ScrollView>
  )
}
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36035648

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档