js代码:
import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import './index.less'
export default class Position extends Component {
constructor(props) {
super(props);
this.state = {
viewId: "A",
scrollTop: 0,
list: [
{
id: "A",
name: 'A'
},
{
id: "B",
name: 'B'
},
{
id: "C",
name: 'C'
},
{
id: "D",
name: 'D'
}
]
}
}
setView(item) {
console.log(item);
let id = [item.id](http://item.id/);
this.setState({
viewId: id
});
}
render() {
console.log(this.state.viewId);
return (
<View>
<View className="toolBar">
{this.state.list.map(item => {
return (
<View className="tag" key={[item.id](http://item.id/)} onClick={this.setView.bind(this, item)}>{[item.name](http://item.name/)}</View>
)
})}
</View>
<ScrollView
className="scrollview"
scrollY
scrollIntoView={this.state.viewId}
>
<View id='A' style='height:500px;background:red'>A</View>
<View id='B' style='height:500px;background:green'>B</View>
<View id='C' style='height:500px;background:red'>C</View>
<View id='D' style='height:500px;background:green'>D</View>
<View id='E' style='height:500px;background:red'>E</View>
<View id='F' style='height:500px;background:green'>F</View>
<View id='G' style='height:500px;background:red'>G</View>
<View id='H' style='height:500px;background:green'>H</View>
<View id='I' style='height:500px;background:red'>I</View>
<View id='J' style='height:500px;background:green'>J</View>
</ScrollView>
</View>
)
}
}
css代码
.scrollview{
margin-top: 100px;
white-space: nowrap;
width: 100%;
height:500px;
}
.toolBar{
position: fixed;
top:0;
display: flex;
justify-content: space-around;
width: 100%;
z-index: 999;
background: #fff;
.tag{
display: block;
width: 25%;
text-align: center;
}
}