ybxf-security-uniapp/pages/s9Unit/task/task_list/task_list.vue

<template>
	<view class="container"> 
			<view class="uni-container">
				<uni-card v-for="(item, index) in tableData" :key="index"  title="任务名称" :sub-title="item.code"
					 extra="进行中" @click="onClick(item)">
					<view  class=" flex  flex-direction">
					<text class="text-cut">截止日期：{{item.createTime}}</text>
					<text class="text-cut">任务说明：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX...</text> 
					</view>
				</uni-card>
			</view>
		 
	</view>
</template>
<script>
	import {
		addRole,
		changeRoleStatus,
		delRole,
		exportRole,
		getRole,
		listRole,
		updateRole
	} from "@/api/system/role";
	export default {
		data() {
			return {
				// 人员数据
				tableData: [],
				// 每页数据量
				pageSize:20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
			}
		},
		onLoad() { 
			this.getData(1)
		},
		methods: {
 
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				listRole({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}).then(response => {
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					  this.tableData = [...this.tableData, ...response.data.list]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
				});
			},
			onClick(val) {
				uni.navigateTo({
					url: '/pages/s9Unit/task/task_details/task_details',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
						},
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage',val)
					}
				})
			},
			// 触底的事件
			onReachBottom() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				})
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return
				this.pageNo += 1
				this.getData(this.pageNo)
			}
		}
	}
</script>
<style lang="scss">
 
</style>