209 lines
5.2 KiB
Vue
209 lines
5.2 KiB
Vue
<!-- 滑动切换选项卡演示(标准写法) -->
|
||
<template>
|
||
<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
|
||
<z-paging-swiper>
|
||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
|
||
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||
<template #top>
|
||
<nav-bar :is_seat="false"></nav-bar>
|
||
<view class="fixed_search_div">
|
||
<view class="back_div" @click="common.navigateBack()">
|
||
<view class="back-icon"></view>
|
||
</view>
|
||
<view class="title font_pf">学习任务</view>
|
||
</view>
|
||
<view class="fixed_search_input_div">
|
||
<search-input placeholder="请输入任务名" @search="search"></search-input>
|
||
</view>
|
||
<view class="detail-body">
|
||
<view class="body-tab">
|
||
<uv-tabs
|
||
class="font_pf my_tabs"
|
||
:current="tabAct"
|
||
:list="tabList"
|
||
@change="tabChange"
|
||
:scrollable="false"
|
||
line-color="#0066FF"
|
||
:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
|
||
:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
|
||
:lineColor="`url(${LineBg}) 10% 10%`"
|
||
></uv-tabs>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
|
||
<swiper class="swiper" :current="tabAct" @change="swiperChange">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||
<content ref="listItemRefs" :state="item.value" :tabIndex="index" :currentIndex="tabAct"></content>
|
||
</swiper-item>
|
||
</swiper>
|
||
</z-paging-swiper>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||
import content from './components/content.vue';
|
||
import { ref } from 'vue';
|
||
import { LineBg } from '@/enum.js';
|
||
import useIndexList from '@/composables/useIndexList.js';
|
||
const { tabAct, listItemRefs, tabChange, swiperChange, search } = useIndexList();
|
||
// 定义tab列表数据
|
||
const tabList = ref([
|
||
{
|
||
name: '全 部',
|
||
value: '01'
|
||
},
|
||
{
|
||
name: '已完成',
|
||
value: '02'
|
||
},
|
||
{
|
||
name: '未完成',
|
||
value: '03'
|
||
}
|
||
]);
|
||
// 刷新当前列表
|
||
const reloadCurrentList = () => {
|
||
listItemRefs.value && listItemRefs.value[current.value]?.reload();
|
||
};
|
||
onLoad(() => {
|
||
// 收藏这里更新列表的item的数据
|
||
uni.$on('update_tasks_item', (res) => {
|
||
listItemRefs.value[0]?.updateData(res);
|
||
listItemRefs.value[1]?.updateData(res);
|
||
listItemRefs.value[2]?.updateData(res);
|
||
});
|
||
|
||
// 完成任务后更新列表单条信息
|
||
// uni.$on('refresh_tasks_data', (res) => {
|
||
// listItemRefs.value[0]?.updateData(res);
|
||
// listItemRefs.value[1]?.clear();
|
||
// listItemRefs.value[2]?.clear();
|
||
// listItemRefs.value[tabAct.value]?.getData('first');
|
||
// if (tabAct.value === 0) {
|
||
// courseRef.value?.updateData(res);
|
||
// } else if (tabAct.value === 1) {
|
||
// taskRef.value?.updateData(res);
|
||
// }
|
||
// });
|
||
});
|
||
onUnload(() => {
|
||
uni.$off('update_tasks_item');
|
||
// uni.$off('refresh_tasks_data');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$bg-margin-left: 50rpx;
|
||
|
||
.my_tabs {
|
||
// 解决这个圆角的图片，开穿透
|
||
:deep(.uv-tabs__wrapper__nav__line) {
|
||
height: 26rpx !important;
|
||
left: 60rpx;
|
||
background-size: 28rpx !important;
|
||
background-repeat: no-repeat !important;
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 100%;
|
||
background-color: #f1f5fa;
|
||
}
|
||
|
||
.detail-body {
|
||
background: #ffffff;
|
||
border-radius: 15rpx;
|
||
z-index: 101;
|
||
overflow: hidden;
|
||
|
||
.body-tab {
|
||
height: 88rpx;
|
||
}
|
||
}
|
||
|
||
.detail-main {
|
||
background-color: #f6f8ff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.title {
|
||
color: #000000;
|
||
font-size: 34rpx;
|
||
height: 34rpx;
|
||
font-weight: 600;
|
||
line-height: 34rpx;
|
||
}
|
||
.fixed_search_input_div {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 22rpx;
|
||
// background-color: red;
|
||
background-color: #fff;
|
||
:deep(.uv-input.uv-input--radius) {
|
||
border-radius: 16rpx !important;
|
||
}
|
||
}
|
||
.fixed_search_div {
|
||
padding: calc(20rpx + var(--status-bar-height)) 15rpx 34rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
// background-color: red;
|
||
// height: 180rpx;
|
||
position: relative;
|
||
|
||
.back_div {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: var(--status-bar-height);
|
||
padding: 10rpx;
|
||
|
||
.back-icon {
|
||
position: relative;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-icon::before,
|
||
.back-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-icon::after {
|
||
top: 25%;
|
||
left: 25%;
|
||
width: 40%;
|
||
height: 40%;
|
||
border-top: 4rpx solid #000000;
|
||
border-left: 4rpx solid #000000;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
}
|
||
.scroll_div {
|
||
background-color: #f1f5fa;
|
||
padding: 22rpx;
|
||
|
||
// height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx - 30rpx);
|
||
.scroll_item_div {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 0 12rpx 0 22rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
</style>
|