sadjv3_user/uni_modules/z-paging/components/sticky-swiper-next-item/sticky-swiper-next-item.vue

147 lines
4.5 KiB
Vue
Raw Permalink Normal View History

2024-06-12 15:52:21 +08:00
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
<view class="content">
<!-- 这里设置了z-paging加载时禁止自动调用reload方法自行控制何时reload懒加载-->
<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false" :hide-empty-view="hideEmptyView"
:refresher-enabled="false" @contentHeightChanged="contentHeightChanged" :auto="false" :auto-clean-list-when-reload="false">
<!-- 如果希望其他view跟着页面滚动可以放在z-paging标签内 -->
<view class="item" v-for="(item,index) in dataList" :key="index">
<view class="item-title">{{item.title}}</view>
<view class="item-detail">{{item.detail}}</view>
<view class="item-line"></view>
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
// v-model绑定的这个变量不要在分页请求结束中自己赋值
dataList: [],
height: 0,
hideEmptyView: true,
completeFunc: null
}
},
props: {
// 当前组件的index也就是当前组件是swiper中的第几个
tabIndex: {
type: Number,
default: function(){
return 0
}
},
// 当前swiper切换到第几个index
currentIndex: {
type: Number,
default: function(){
return 0
}
}
},
watch: {
currentIndex: {
handler(newVal) {
if (newVal === this.tabIndex) {
// 懒加载当滑动到当前的item时才去加载
this.$nextTick(() => {
setTimeout(() => {
this.$refs.paging.reload();
}, 100);
})
}
},
immediate: true
}
},
methods: {
queryList(pageNo, pageSize) {
// 组件加载时会自动触发此方法,因此默认页面加载时会自动触发,无需手动调用
// 这里的pageNo和pageSize会自动计算好直接传给服务器即可
// 模拟请求服务器获取分页数据,请替换成自己的网络请求
const params = {
pageNo: pageNo,
pageSize: pageSize,
type: this.tabIndex + 1
}
this.$request.queryList(params).then(res => {
this.$refs.paging.complete(res.data.list);
this.hideEmptyView = false;
//请求结束调用父组件的下拉刷新结束回调函数使得父组件中的z-paging下拉刷新结束
if (this.completeFunc) {
this.completeFunc();
}
}).catch(res => {
// 如果请求失败写this.$refs.paging.complete(false);
// 注意每次都需要在catch中写这句话很麻烦z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
// 请求结束调用父组件的下拉刷新结束回调函数使得父组件中的z-paging下拉刷新结束
if (this.completeFunc) {
this.completeFunc();
}
})
},
// 页面通知当前子组件刷新列表
reload(completeFunc) {
// 先把父组件下拉刷新的回调函数存起来
this.completeFunc = completeFunc;
// 调用z-paging的reload方法
this.$refs.paging.reload();
},
// 当列表高度改变时通知页面的swiper同步更改高度
contentHeightChanged(height){
const finalHeight = this.dataList.length ? height : 0;
// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意页面中有使用slot="top"插入的view则此处的minHeight还应该减去slot="top"插入的view的高度
const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
this.$emit('heightChanged',Math.max(finalHeight, minHeight));
},
// 页面通知当前子组件加载更多数据
doLoadMore(){
this.$refs.paging.doLoadMore();
},
// 页面通知当前子组件清除数据
clear(){
this.$refs.paging.clear();
this.hideEmptyView = true;
}
}
}
</script>
<style>
/* 注意1、父节点需要固定高度z-paging的height:100%才会生效 */
/* 注意2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
.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>