yxy/uniapp/components/swiper-list-item/swiper-list-item.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="true">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
					<view class="" style="overflow-y: scroll !important;height: 94vh;">
							<block v-for="(items, indexs) in dataList" :key="indexs" v-if="dataList">
									<view class="jie_card" @click="detail(items.id,items.status)">
										<view class="jie_card_title">
											<text class="jie_card_title_text">借单号：{{items.encoding}}</text>
											<text class="jie_tags" v-if="items.purpose===1">教学借单</text>
											<text class="jie_tags jie_tags2" v-if="items.purpose===0">科研借单</text>
										</view>
										<uv-line></uv-line>
										<view class="jie_contend">
											<view class="jie_contend_text">
												<text class="jie_contend_text1">借取人：</text>
												<text class="jie_contend_text2">{{items.username}}</text>
											</view>
											<view class="jie_contend_text">
												<text class="jie_contend_text1">联系电话：</text>
												<text class="jie_contend_text2">{{items.mobile}}</text>
											</view>
											<view class="jie_contend_text">
												<text class="jie_contend_text1">申请时间：</text>
												<text class="jie_contend_text2">{{items.create_time}}</text>
											</view>
										</view>
										<view class="jie_card_ztai" v-if="items.status===6">学院审批</view>
										<view class="jie_card_ztai" v-if="items.status===0">待审批</view>
										<view class="jie_card_ztai jie_card_ztai2" v-if="items.status===2">待使用</view>
										<view class="jie_card_ztai" v-if="items.status===5">已逾期</view>
										<view class="jie_card_ztai jie_card_ztai2" v-if="items.status===3">使用中</view>
										<view class="jie_card_ztai" v-if="items.status===1">已驳回</view>
										<view class="jie_card_ztai" v-if="items.status===7">学院驳回</view>
										<view class="jie_card_ztai jie_card_ztai2" v-if="items.status===4">已归还</view>
										<view class="jie_card_ztai" v-if="items.status===8">修改配件</view>
									</view>
							</block>
						<view v-else>
							<uv-empty text="暂无数据" icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
						</view>
						<view style="width: 100%; height: 5vh;"></view>
					</view>
		</z-paging>
	</view>
</template>

<script>
	import { requestApi } from '@/api/request.js';
	export default {
		data() {
			return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				pageNo: 1,
				pageSize: 10,
				dataList: [],
				// 当前组件是否已经加载过了
				firstLoaded: false,
				// 是否滚动到当前页
				isCurrentPage: false
			}
		},
		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时，才去加载
						if(!this.firstLoaded){
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								setTimeout(() => {
									this.isCurrentPage = true;
								}, 100);
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			detail(id , status) {
				if(this.tabIndex + 1 == 3 && (status ==1 || status == 7 || status == 8) ){ 
					wx.navigateTo({
						url: '/pages/teacher/edit?data=' + JSON.stringify(id)
					})
				
				}else{ 
					wx.navigateTo({ 
						url: '/pages/index/detail?data=' + JSON.stringify(id)
					})
				}
			},
			// 接收父组件传过来的刷新列表要求
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();	
				})
			},
			async queryList(pageNo, pageSize) {
				
				wx.showLoading({ title: '加载中' });
				const params = {
					page: pageNo,
					limit: pageSize,
					type: this.tabIndex + 1
				};
				await requestApi('index.php/admin/borrow.borrowApp/apply', params).then(res => {
					//将请求的结果数组传递给z-paging
					this.$refs.paging.complete(res.data.list.data);
					console.log(res.data.list.data)
					this.firstLoaded = true;
					wx.hideLoading();
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</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>