taro小结-scroll-view

 <ScrollView
  className='scrollview'
  scrollX // 开启横向需要加额外样式 详细见文档
  // http://taro-docs.jd.com/taro/docs/components/viewContainer/scroll-view/
  scrollWithAnimation
  ...
  scrollIntoView={tag} // 核心 对应数据中的id，进行滚动
  >
      {
      list.map((ele,index)=>{
            return(
              <View 
              onClick={()=>handleClick(ele, index)}
              key={ele.id}
              id={ele.id}
              className={ index === activeIndex ? 'active':'' }
    		 >
      			{ele.v}
    		</View>
    )
    })
  }
  </ScrollView>

// css
.scrollview{
    white-space: nowrap;
    padding: 20rpx;
    View{
        width: 100%;
        display: inline-block
    }
}

const handleClick =(v, i)=>{
  // 前几个不需要调节
  if(i>2){
    setTag(list[i-3].id)
  }
  setActiveIndex(i) // 控制高亮样式
}

// data
 const [list, setList] =  useState([{
        id:'a1',
        v:1
      },{
        id:'a2',
        v:2
      },{
        id:'a3',
        v:3
      },{
        id:'a4',
        v:4
      },{
        id:'a5',
        v:5
      },{
        id:'a6',
        v:6
      },{
        id:'a7',
        v:7
      },{
        id:'a8',
        v:8
      }
      ,{
        id:'a9',
        v:9
      },{
        id:'a10',
        v:10
      }
    ])