tall-mui-3-project/src/components/Roles/component/RoleList.vue

<template>
  <view>
    <view class="homeBox u-skeleton">
      <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
        <view class="tabBox">
          <view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles">
            <view :class="setColor(item.mine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
  </view>
</template>

<script>
export default {
  name: 'RoleList',
  data() {
    return {
      tabIndex: 0, //当前访问的 index 默认为0
      tabList: [], //tab dom节点集合
      scrollLeft: 0, //scrollview需要滚动的距离
      roles: [
        {
          id: 1,
          name: '项目经理',
          mine: 0,
          pm: 1,
          sequence: 1,
        },
        {
          id: 2,
          name: '运维',
          mine: 0,
          pm: 0,
          sequence: 2,
        },
        {
          id: 3,
          name: '导师一',
          mine: 1,
          pm: 0,
          sequence: 3,
        },
        {
          id: 4,
          name: '导师二',
          mine: 1,
          pm: 0,
          sequence: 4,
        },
        {
          id: 5,
          name: '导师三',
          mine: 1,
          pm: 0,
          sequence: 5,
        },
        {
          id: 6,
          name: '导师四',
          mine: 1,
          pm: 0,
          sequence: 6,
        },
        {
          id: 7,
          name: '导师五',
          mine: 1,
          pm: 0,
          sequence: 7,
        },
        {
          id: 8,
          name: '导师六',
          mine: 1,
          pm: 0,
          sequence: 8,
        },
        {
          id: 9,
          name: '导师七',
          mine: 1,
          pm: 0,
          sequence: 9,
        },
        {
          id: 10,
          name: '导师八',
          mine: 1,
          pm: 0,
          sequence: 10,
        },
      ],
      loading: true, // 是否显示骨架屏组件
    };
  },

  mounted() {
    this.init();
    setTimeout(() => {
      this.loading = false;
      console.log('this.loading: ', this.loading);
    }, 5000);
  },

  methods: {
    init() {
      const data = document.getElementsByClassName('tab-children');
      // TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中
      data.forEach(item => {
        this.tabList.push({
          width: item.clientWidth,
          left: item.offsetLeft,
        });
      });
    },

    changeIndex(index) {
      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
      this.tabIndex = index;
      //当前滚动的位置
      let left = 0;
      let screenWidth = window.screen.width;
      for (let i = 0; i < index; i++) {
        left += this.tabList[i].width + this.tabList[i].left * 2;
      }
      left += this.tabList[index].width;
      this.scrollLeft = left - screenWidth / 2;
    },

    // 设置文字颜色
    setColor(mine, tabIndex, index) {
      if (mine === 1 && tabIndex === index) {
        return 'default-tab-choice';
      }
      if (mine === 1 && tabIndex !== index) {
        return 'default-tab-item';
      }
      if (mine === 0 && tabIndex === index) {
        return 'tab-choice';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 这是最外层盒子
.wrap {
  position: relative;
  background: #f7f7f7;
}

.homeBox {
  // 对此盒子进行 sticky 粘性定位
  position: sticky;
  top: 0;
  background: #fff; //设置背景 否则会透明
  /* #ifdef H5 */
  //粘性定位 在h5下 加 原生头部高度 44px
  top: 88rpx;

  /* #endif */
  .tabBox {
    position: relative;
    white-space: nowrap;
    // height: 88rpx;

    /* #ifdef MP-TOUTIAO */
    /* #endif */
    .tab-item {
      padding: 20rpx 24rpx;
      position: relative;
      display: inline-block;
      text-align: center;
      font-size: 30rpx;
      transition-property: background-color, width;
    }

    .default-tab-item {
      color: $roleChoiceColor;
    }

    .default-tab-choice {
      //当前选中 基于此类名给与底部选中框
      position: relative;
      color: $roleChoiceColor;
      font-weight: 600;
    }

    .default-tab-choice:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -20rpx;
      width: 100%;
      height: 6rpx;
      border-radius: 2rpx;
      background: $roleChoiceColor;
    }

    .tab-choice {
      //当前选中 基于此类名给与底部选中框
      position: relative;
      color: $uni-color-primary;
      font-weight: 600;
    }

    .tab-choice:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -20rpx;
      width: 100%;
      height: 6rpx;
      border-radius: 2rpx;
      background: $uni-color-primary;
    }
  }
}

// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}

/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
  display: none;
}

/* #endif */

.skeleton {
  height: 44rpx;
}
</style>