1

我对具有不同长度/高度的滑动组件感到绝望..所以我需要的是“自动高度” ——但这并没有什么不同！

我真正想要的是我的应用程序应该包含的 4 或 5 个页面，并且我想通过滑动/滑动来切换页面。我将所有组件都放在了 App.js 的 return() 中，如下所示...

不使用路由器，因为我基本上需要 2 个 url 在 -> 登录和 App.js 中的页面之间切换。但如果有其他选择，请告诉我:)


     componentDidUpdate(prevProps){
        // Typical usage (don't forget to compare props):
        if (this.state.id && (this.props.id !== prevProps.id)) {
            this.props.loadProfile();
        }
        this.swipeableActions.updateHeight();
     }

     render() {
        const { isLoading, isAuthenticated} = this.state;

        // Loader
        if (isLoading) {
            return <Splash />
        }
        if (!isAuthenticated) {
            // You can render any custom fallback UI
            this.props.history.push('/signin')
            //redirect to login
        }

        return (

            <html>
                
                <header className='App-header'>
                    <img src={require('./images/logo-multicolor.png')} className='logo-header' alt="logo" />
                </header>
                <SwipeableViews
                    animateTransitions
                    animateHeight
                    action={actions => {this.swipeableActions = actions;}}
                    enableMouseEvents
                    containerStyle={{ width: '100vw', height: '100vh', WebkitOverflowScrolling: 'touch', }}
                >

                    <BlogPosts/>

                    <SearchPics/>

                    <UserSettings/>

                    
                </SwipeableViews>
                
            </html>

        );
    }

所以这些组件是我的页面，我想滑动/滑动所有页面。但是这些中的每一个都有不同的长度/高度：

  • 一个有一个应用栏作为页脚。页眉和页脚之间有可以垂直滚动的内容；
  • 另一个组件只是一长串必须垂直滚动的内容......等等。

使用上面使用 react-swipeable-views 的代码，组件的行为如下：

我垂直向下滚动1次，然后直接降落在内容的末尾。完美。但我可以继续滚动到空白区域（假设：高度：100vh，因此内部所有组件的完整“滑动器/滑块”与最长/最高组件一样长/一样高？）。

对于带有页眉和页脚的组件（可滚动内容仅在页眉和页脚之间），第一个滚动将我带到中间列表的末尾，而我的页脚很好地保持在底部。完美的！再次滚动会导致页脚后出现空白（即使底部：0 和位置：固定或静态或其他......）。

当我将高度设置为自动containerStyle = {{width: '100vw', height: 'auto', ..}}

（而不是"height: 100vh"）我不能再滚动了，一点也不能！..如果我设置，同样的事情会发生height: '100%'。在这两种情况下，甚至页脚都会在那个组件中消失！！！

以下是 html、body 和 root 的 css 参数：

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100% !important;
  width: 100% !important; 
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  font-family: 'Roboto';
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-repeat: no-repeat;
} 

#body {
  height: calc(100% - 50px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* The element with id="root" */
#root {
  overflow: hidden !important;
  height: 100% !important;
  min-width: 100% !important; 
  margin: 0 !important;
  padding: 0 !important;
}

请帮我！我应该使用不同的库而不是 react-swipeable-views 吗？如果是，是哪个？或者有没有办法解决这个问题？

版本：

"react": {
      "version": "16.13.1",
...

"react-dom": {
      "version": "16.13.1",
...

"react-swipeable-views": {
      "version": "0.13.9",
..
      "react-swipeable-views-core": "^0.13.7",
      "react-swipeable-views-utils": "^0.13.9",

PS：如果我在css中将html或body或root的高度设置为100vh，我会在垂直滚动时获得额外的空间，这当然是我想避免的（假设：与Chrome中的url栏有关？）。

4

1 回答 1

0

在我尝试了 react-swipeable-routes 和 CSSTransition 以实现自定义高度 + 可滑动但不幸的是没有任何利润/改变行为之后.. 我已将组件拆分为 2 个可滑动视图并将它们包装在一个删除标题高度的 div 中，所以底部没有额外的空间：

<div style={{maxHeight: 'calc(100% - 52px)'}}>
   <SwipeableViews
    animateTransitions={true}
    enableMouseEvents={true}
    containerStyle={{width: '100%', height: '100%',WebkitOverflowScrolling: 'touch', }}
   >

      <Component that has footer and should only be 100% height without scrolling />

   </SwipeableViews>

   <SwipeableViews
    animateTransitions={true}
    enableMouseEvents={true}
    containerStyle={{width: '100%', height: '100vh',WebkitOverflowScrolling: 'touch', }}
   >

      <Component that has long content and should be 100vh height with scrolling />

   </SwipeableViews>

</div>

解决了我的问题..

编辑：没有解决它。删除浏览器数据（现金和历史记录）后，视图无法正确显示 - 必须将其放回一个可滑动视图...

于 2020-11-06T14:08:16.540 回答