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>
)
}

最后

以上就是积极盼望为你收集整理的Taro ui Tabs组件固定到页面顶部的全部内容，希望文章能够帮你解决Taro ui Tabs组件固定到页面顶部所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。