154 lines
4.3 KiB
Vue
154 lines
4.3 KiB
Vue
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
|
||
<template>
|
||
<view class="content">
|
||
<!-- :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
|
||
<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
|
||
<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
|
||
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
|
||
<view class="item-title">{{ item.title }}</view>
|
||
<view class="item-detail">{{ item.detail }}</view>
|
||
<view class="item-line"></view>
|
||
</view>
|
||
|
||
<template #empty>
|
||
<no-data />
|
||
</template>
|
||
<template #loading>
|
||
<loading-data />
|
||
</template>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, nextTick, onMounted } from 'vue';
|
||
|
||
// props定义
|
||
const props = defineProps({
|
||
// 当前组件的index，也就是当前组件是swiper中的第几个
|
||
tabIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 当前swiper切换到第几个index
|
||
currentIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
responseCallback: {
|
||
type: Function,
|
||
default: null
|
||
}
|
||
});
|
||
|
||
// 数据
|
||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||
const dataList = ref([]);
|
||
// 当前组件是否已经加载过了
|
||
const firstLoaded = ref(false);
|
||
// 是否滚动到当前页
|
||
const isCurrentPage = ref(false);
|
||
// ref引用
|
||
const paging = ref(null);
|
||
|
||
// 监听currentIndex变化
|
||
watch(
|
||
() => props.currentIndex,
|
||
(newVal) => {
|
||
if (newVal === props.tabIndex) {
|
||
// 懒加载，当滑动到当前的item时，才去加载
|
||
if (!firstLoaded.value) {
|
||
// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
isCurrentPage.value = true;
|
||
}, 100);
|
||
});
|
||
}
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
// 接收父组件传过来的刷新列表要求
|
||
const reload = () => {
|
||
nextTick(() => {
|
||
// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
|
||
paging.value && paging.value.reload();
|
||
});
|
||
};
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
if (!props.responseCallback) { paging.value.complete(false); return; };
|
||
|
||
const params = {
|
||
pageNo: pageNo,
|
||
pageSize: pageSize,
|
||
type: props.tabIndex
|
||
};
|
||
|
||
try {
|
||
props.responseCallback(params).then(res => {
|
||
if (paging.value) {
|
||
paging.value.complete(res.list || []);
|
||
firstLoaded.value = true;
|
||
}
|
||
}).catch(err => {
|
||
if (paging.value) {
|
||
paging.value.complete(false);
|
||
}
|
||
console.error('获取新闻列表失败', err);
|
||
});
|
||
} catch (e) {
|
||
console.error('调用responseCallback异常', e);
|
||
if (paging.value) {
|
||
paging.value.complete(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 点击项目
|
||
const itemClick = (item) => {
|
||
console.log('点击了', item.title);
|
||
};
|
||
|
||
// 暴露方法给父组件调用
|
||
defineExpose({
|
||
reload
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
|
||
.content {
|
||
height: 100%;
|
||
}
|
||
|
||
.item {
|
||
position: relative;
|
||
height: 150rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0rpx 30rpx;
|
||
}
|
||
|
||
.item-detail {
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
color: white;
|
||
background-color: #007AFF;
|
||
}
|
||
|
||
.item-line {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: 0rpx;
|
||
height: 1px;
|
||
width: 100%;
|
||
background-color: #eeeeee;
|
||
}
|
||
</style>
|