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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// 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>
)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 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>
)
}