FE-lab-xcx/pages_student/views/meViolation/meViolation.vue

<!-- 我的违规 -->
<template>
	<view id="meViolation">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="max-list-box">
			<view class="for-list-box" v-for="(item,index) in dataList" :key="index">
				<view>违规项：{{item.reason}}</view>
				<view>违规时间：{{item.createTime}}</view>
				<view>处理方式：{{item.treatmentMethod}}</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		examViolationMyAppList
	} from '@/pages_student/api/index.js'
	export default {
		data() {
			return {
				total: 0,
				dataList: [],
				getDataType: false,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList();
		},
		methods: {
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取数据列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.deptId = this.facultyIndex ? this.facultyList[this.facultyIndex].deptId : '';
				obj.typeId = this.subjectIndex ? this.subjectList[this.subjectIndex].typeId : '';
				obj.levelId = this.levelIndex ? this.levelList[this.levelIndex].levelId : '';
				const {
					data
				} = await examViolationMyAppList(obj);
				if (data.code == 200) {
					if (self.queryParams.page == 1) {
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					} else {
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#meViolation {
		height: 100%;
		display flex;
		flex-direction column;

		.max-list-box {
			flex: 1;
			overflow-y: scroll;

			.for-list-box {
				background #fff;
				border-top: 1rpx solid #E0E0E0;
				padding: 20rpx;

				view {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}


			.get-data-null-p {
				text-align: center;
				line-height: 80rpx;
				padding-bottom: 40px;
				color: #999;
			}
		}
	}
</style>