Taro ui Tabs组件固定到页面顶部

直接上代码了，有问题评论区交流，写的不明白的我再改。亲测有效

方法一

// css
.case-tab {
  position: fixed;
  top: 0;
  left: 0;
}
// 获取可视区高度
componentDidMount () {
    const info = Taro.getSystemInfoSync()
    const { windowHeight, statusBarHeight, titleBarHeight } = info
    const tempHeight = (windowHeight - 50) + 'px'
    this.setState({
      centerHeight: tempHeight
    })
  }
  
// 动态设置切换页面高度
  render () {
    const { centerHeight } = this.state
    const tabList = [{ title: 'tab1' }, { title: 'tab2' }, { title: 'tab3' }]
    const scrollStyle = {
      height: centerHeight
    }
    const scrollTop = 0
    const Threshold = 20
    return (
      <View className='case-tab'>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <ScrollView
              className='scrollview'
              scrollY
              scrollWithAnimation
              scrollTop={scrollTop}
              style={scrollStyle}
              lowerThreshold={Threshold}
              upperThreshold={Threshold}
              onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
              onScroll={this.onScroll}
            >
              <CaseVaccine></CaseVaccine>
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <CaseExpelling></CaseExpelling>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }

方法二

// css
.case-tab {
  position: fixed;
  top: 0;
  left: 0;
}
// 获取可视区高度
componentDidMount () {
    const info = Taro.getSystemInfoSync()
    const { windowHeight, statusBarHeight, titleBarHeight } = info
    const tempHeight = (windowHeight - 50) + 'px'
    this.setState({
      centerHeight: tempHeight
    })
  }
  
// 动态设置切换页面高度
  render () {
    const { centerHeight } = this.state
    const tabList = [{ title: 'tab1' }, { title: 'tab2' }, { title: 'tab3' }]
    const scrollStyle = {
      height: centerHeight,
      overflow: 'scroll'
    }
    return (
      <View className='case-tab'>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <View style={scrollStyle}>
              <CaseVaccine></CaseVaccine>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <CaseExpelling></CaseExpelling>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }