uni-app实现组件菜单左右滑动并点击切换（选中居中显示）

先看下效果

效果一： 可直接使用 scroll-into-view 属性实现  或者 也可使用  scroll-left

思路：第一种， scroll-into-view 绑定一个动态 ID，子元素循环产出ID，点击时进行绑定(这次就不做代码产出了)

           第二种， 计算每个子元素的宽度，点击时获取当前点击元素前面的元素宽度之和

效果二：使用  scroll-left

思路：计算每个子元素的宽度，点击时获取当前点击元素索引 - 1 的前面元素宽度之和，相比于效果一的第二种情况，这里少算当前点击元素前面的一个元素的宽度，实现留一

效果三：使用  scroll-left

思路：当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 实现居中展示

<template>
  <view class="center-cut-menu">
    <scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
      <view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
        <text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            id: 1,
            name: '星期一'
          },
          {
            id: 2,
            name: '星期二'
          },
          {
            id: 3,
            name: '星期三'
          },
          {
            id: 4,
            name: '星期四'
          },
          {
            id: 5,
            name: '星期五'
          },
          {
            id: 6,
            name: '星期六'
          },
          {
            id: 7,
            name: '星期七'
          },
          {
            id: 8,
            name: '星期八'
          },
          {
            id: 9,
            name: '星期九'
          },
          {
            id: 10,
            name: '星期十'
          }
        ],
        contentScrollW: 0, // 导航区宽度
        curIndex: 0, // 当前选中
        scrollLeft: 0, // 横向滚动条位置
      }
    },
    mounted() {
      // 获取标题区域宽度，和每个子元素节点的宽度
      this.getScrollW()
    },
    methods: {
      // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
      getScrollW() {
        let query = uni.createSelectorQuery().in(this);
        query.select('.scroll-view').boundingClientRect(data => {
          // 拿到 scroll-view 组件宽度
          this.contentScrollW = data.width
        }).exec();

        query.selectAll('.scroll-item').boundingClientRect(data => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            this.list[i].left = data[i].left;
            //  scroll-view 子元素组件宽度
            this.list[i].width = data[i].width
          }
        }).exec()
      },

      // 选择标题
      changeMenu(index) {
        this.curIndex = index;

        // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
        // this.scrollLeft = index * this.list[index].width

        // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
        // this.scrollLeft = 0;
        // for (let i = 0; i < index; i++) {
        //     this.scrollLeft += this.list[i].width
        // };


        // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
        // this.scrollLeft = (index - 1)  * this.list[index].width

        // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
        // this.scrollLeft = 0;
        // for (let i = 0; i < index - 1; i++) {
        //  this.scrollLeft += this.list[i].width
        // };


        // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
        this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;

      }
    }
  }
</script>

<style lang="scss">
  .center-cut-menu {
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;

    .scroll-view {
      height: 100rpx;
      white-space: nowrap;

      .scroll-item {
        height: 100rpx;
        padding: 0 20rpx;
        display: inline-block;
        text-align: center;

        .item-text {
          font-size: 30rpx;
          line-height: 100rpx;

          &.active {
            color: #1468FF;
          }
        }
      }
    }
  }
</style>

注： 支付宝小程序不支持in(component)，使用无效果