taro、uniapp、微信小程序导航栏双向联动

效果图

大概思路

1、导航栏用ScrollView写，不过样式得加上white-space: nowrap;文本不换行，
2、在导航栏上定义id用来**Promise.all()**获取元素属性，
Promise.all()可以将多个Promise实例包装成一个新的Promise实例，
3、 再用Taro.createSelectorQuery()获取每一个DOM节点属性，

视图

<View className='tab_index_wrapp'>
  <ScrollView scrollWithAnimation className='tab_scroll_view' 
    scrollX id='tabList' scrollLeft={
   offsetLeft}
  >
    <View className='tab_view'>
      {
   
        list.map((item, index) => {
   
          return (
            <View 
              key={
   index} className='tab' id={
   `item-${
     index}`}
              onClick={
   this.setLineItem.bind(this, index)}
            >{
   item.title}</View>
          )
        })
      }
      <View className='tab_line' style={
   lineStyle}></View>
    </View>
  </ScrollView>

  <View className='tab_swiper_wrapp'>
    <Swiper className='tab_swiper' current={
   actvieIndex} onChange={
   this.swiperBindchange.bind(this)}>
      {
   
        listItem.map((item, index) => {
   
          return (
            <SwiperItem key={
   index} className='tab_swiper'>
              <View>{
   item.id}</View>
            </SwiperItem>
          )
        })
      }
    </Swiper>
  </View>
</View>

视图的样式

.tab_index_wrapp{
   
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  .tab_scroll_view{
   
    position: relative;
    width: