tall-mui-3-project/src/components/Experience/Experience.vue

<template>
  <view class="role-box">
    <img class="role-img" src="https://www.tall.wiki/staticrec/img/qcp-role.png" alt="" />
    <view class="change-role-btn flex flex-row flex-nowrap">
      <view
        v-for="(item, index) in roles"
        :key="index"
        class="role-btn"
        :class="roleId === item.id ? 'avtive-btn' : 'no-active'"
        @click="changeRole(item.id, index)"
      >
        {{ item.name }}
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'Experience',
  data() {
    return { roles: [] };
  },
  computed: {
    ...mapState('role', ['visibleRoles', 'invisibleRoles', 'roleId']),
    ...mapState('task', ['tasks']),
  },
  watch: {
    visibleRoles(val) {
      if (val && val.length) {
        this.roles = [...this.visibleRoles, ...this.invisibleRoles];
      }
    },
  },
  methods: {
    ...mapMutations('role', ['setRoleId']),
    // 切换角色
    // 查任务这里不用管 project监听了roleId的变化
    // 时间基准点不用管 project监听了roleId 里处理了
    changeRole(id, index) {
      console.log('id, index: ', id, index);
      try {
        // 清除多余的script
        this.clearPluginScript();
        this.$nextTick(() => {
          this.setRoleId(id);
          // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
          // this.setCurrentRole(index);
        });
      } catch (error) {
        console.error('role.vue changeRole error: ', error);
      }
    },
    // 清除插件script
    clearPluginScript() {
      try {
        const scripts = document.querySelectorAll('script[data-type=plugin]');

        for (let i = 0; i < scripts.length; i++) {
          document.body.removeChild(scripts[i]);
        }
      } catch (error) {
        console.error('clearPluginScript error: ', error);
      }
    },
    // 设置滚动位置
    setCurrentRole(index) {
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll('.tab-children')
        .boundingClientRect(data => {
          data.forEach(item => {
            this.tabList.push({ width: item.width });
          });
        })
        .exec();

      const system = uni.getSystemInfoSync(); // 获取系统信息
      // 屏幕宽度
      let screenWidth = system.windowWidth;
      // 当前滚动的位置
      let left = 0;
      for (let i = 0; i < index; i++) {
        left += this.tabList[i].width + (this.roleLeft - 8) * 2;
      }

      left += (this.tabList[index].width + (this.roleLeft - 8) * 2) / 2;
      if (left > screenWidth) {
        this.scrollLeft = left - screenWidth + screenWidth / 2;
      } else if (left > screenWidth / 2) {
        this.scrollLeft = left - screenWidth / 2;
      } else if (left < screenWidth / 2) {
        this.scrollLeft = 0;
      }
    },
  },
};
</script>
<style scoped>
.role-img {
  height: 100px;
  width: 100%;
}
.role-box {
  position: relative;
}
.change-role-btn {
  width: 100%;
  position: absolute;
  overflow-x: auto;
  bottom: 12px;
  left: 0;
  padding: 0 12px;
}
.role-btn {
  flex-shrink: 0;
  border: 1px solid #fff;
  height: 32px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #709dff;
  padding: 0 8px;
  margin: 0 8px;
  border-radius: 12px;
}
.avtive-btn {
  background-color: #fff;
  color: #709dff;
}
.no-active {
  color: #fff;
}
</style>