uniapp微信小程序 达成swiper与按钮完成上下联动

1. 需求：页面顶部展示n个小图标。当选中某个图标时，下方视图会相应切换；反之，当滑动下方视图时，顶部选中的图标也会同步更新。

2. 思路： 上方scroll-view 区域渲染图标，并且可左右滑动，下方使用swiper可以左右滑动。

3. 代码实现

1. 上方图标渲染

（1）将 scroll-x 属性设为 true 以启用左右滑动功能，同时动态绑定 scroll-left 属性实现上下联动滑动效果。

<scroll-view scroll-x="true" class="view_top" :scroll-left="scrollWidth" enhanced="true" :scroll-with-animation="true" :show-scrollbar="false">
  <view class="icons">
    <view class="icon_view" v-for="(item1, index1) in list1" :key='index1' :id="'tabNum' + index1">
      <image class="icon" :src="'item1.url'" mode="aspectFit" v-if="tIndex != index1" @click="chooseIcon(index1)">
        </image>
          <image class="icon" :src="'item1.url" mode="aspectFit" v-if="tIndex == index1">
            </image>
              <text class="icon_name" :class="taskIndex == index1 ? 'icon_name_select' : ''">
                {
                {item1.name
                }
                }</text>
                  </view>
                    </view>
                      </scroll-view>

（2）点击图标切换下方视图 chooseIcon

chooseIcon(index){
this.tIndex = index
this.tabCurrent = 'tabNum' + index
this.getScrollWidth(index)
},

（3）css样式

.view_top{
white-space: nowrap;
width: 100%;
height: 15vh;
margin-top: 4vh;
}
.icons{
height: 15vh;
}
.icon{
width: 22vw;
height: 10vh;
}
.icon_name{
text-align: center;
width: 22vw;
display: block;
font-size: 22rpx;
}
.icon_name_select{
color: black;
}
.icon_view{
display: inline-block;
white-space: nowrap;
position: relative;
}

2. 下方视图渲染

（1）current绑定角标，@change监听滑动操作

<swiper class="Swiper" :current="tIndex" @change="swiperChange">
  <swiper-item class="Swiper_item" v-for="(item2, index2) in List2" :key='index2'>
    <view class="Swiper_item_view">
      </view>
        </swiper-item>
          </swiper>

（2）滑动监听函数 swiperChange

swiperChange(e) {
let index = e.detail.current
this.chooseIcon(index)
},

（3）scrollWidth计算横向滚动参数，为确保位置的精准性，将vw转化为px

getScrollWidth(index) {
var vw = (index )*22 /100 * this.vwsize;
var data = vw + 'px';
this.contentScrollW = data;
}

（4）css样式

.Swiper_item{
display: flex;
flex-direction: column;
background-image: url('url');
background-size: cover;
background-position: center;
overflow: auto;
height: 100%;
width: 100%;
}
.Swiper_item_view{
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
width: 100%;
position: relative;
}

以上是 uniapp 小程序实现上下轮播联动功能的具体方法。