dykj-outsource-12123/pages/schedule/index.vue

<template>
  <view style="background-color: #fff; height: 88vh; display: flow-root">
    <view class="select">
      <view style="margin-left: 1rem; font-weight: 700">以下数据来自</view>
      <view class="icon">
        <view class="">社会</view>
        <view class=""><uni-icons type="forward" size="20"></uni-icons></view>
      </view>
    </view>
    <view class="tow">
      <view class="custom-tabs">
        <view v-for="(item, index) in feedTabs" :key="item.text" @click="onTabChange(index, item)" :class="{ active: tabIndex === index }" class="custom-tabs-bar">
          <text class="tabbar-text">{{ item.label }}</text>
        </view>
        <view :style="{ left: cursorPosition + 'px' }" class="custom-tabs-cursor"></view>
      </view>
      <view class="content-area">
        <view v-if="tabIndex === 0">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 1">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 2">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 3">
          <view class="noData">
            <image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
            <view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
          </view>
        </view>
      </view>
    </view>
    <TabBar />
  </view>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, computed } from 'vue';
import TabBar from '@/components/tabBar/index.vue';
const feedTabs = ref([
  { label: '受理中', rendered: true },
  { label: '已办结', rendered: false },
  { label: '已取消', rendered: false },
  { label: '全部', rendered: false }
]);
// 定义tab的索引值
const tabIndex = ref(0);
// 获取每个 tabbar 的位置（靠左位置）
const tabbarRect = ref([]);

// 根据索引值获取tabbar 的 left 值
const cursorPosition = computed(() => {
  // 避免初始值为空数且的错误
  if (tabbarRect.value.length === 0) return;
  // 获取tabbar的宽度和left的值
  const { width, left } = tabbarRect.value[tabIndex.value];
  return (width - 76) / 2 + left;
});
onMounted(() => {
  // 1. 创建查询器
  // 组件式 api 获取组件（页面）实例时，命名用
  // getCurrentInstance 相当于选项式 API this
  const querySelector = uni.createSelectorQuery().in(getCurrentInstance());
  // 2. 查找元素
  querySelector.selectAll('.custom-tabs, .tabbar-text').boundingClientRect(([parent, ...res]) => {
    // console.log(parent, res)
    // 将tabbar的宽度和距离左侧的距离计算出来
    tabbarRect.value = res.map(({ width, left }) => {
      return { width, left: left - parent.left };
    });
  });
  // 3. 执行查找
  querySelector.exec();
});
// Vue 组合式 Api 事件回调就是一个普通的函数
function onTabChange(index, item) {
  tabIndex.value = index;
  // 触发事件
  customTabsEmit('click', item);
}
</script>

<style lang="scss" scoped>
.select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding: 0.8rem 0rem;
  background-color: #fff;
  border-bottom: 1rpx solid #f2f2f3;
}
.icon {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.tow {
  .custom-tabs {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    position: relative;
    padding: 0 30rpx;
  }
  .custom-tabs-bar {
    height: 100rpx;
    line-height: 100rpx;
    color: #000;
    font-weight: 700;
    padding-right: 30rpx;
    position: relative;

    &.active {
      color: #49a1d7;
      font-weight: 700;
    }
  }
  .tabbar-text {
    font-size: 1rem;
  }
  .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;
    width: 80px;
    height: 2px;
    border-radius: 2px;
    background-color: #49a1d7;
    transition: all 0.3s ease-out;
  }
}
.noData {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>