123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<template>
|
|
<view style="background-color: #f5f9fa; 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>
|
|
<view v-else-if="tabIndex === 1">暂无数据</view>
|
|
<view v-else-if="tabIndex === 2">暂无数据</view>
|
|
<view v-else-if="tabIndex === 3">暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, getCurrentInstance, computed } from '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 - 80) / 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;
|
|
}
|
|
}
|
|
</style>
|