taro scrollIntoView 跳转对应id

一纶新岳

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;  
}  
}
阅读 3.4k

一纶新岳
个人专栏
54 声望
3 粉丝
0 条评论
54 声望
3 粉丝
文章目录
宣传栏