uniapp 之监听下拉加载下一页数据

<template>
	<view>
		<view class="banner">
			<image src="../../static/common/banner.jpg" style="width: 100%;"></image>
		</view>
		<template v-if="list.length>0">
			<view class="contain" v-for="(item,index) in list" :key="index">
				<view class="containTitle">
					<image src="../../static/common/机构管理.png" mode=""></image>
					<text>主体名称：{
   
   {item.subName}}</text>
				</view>
				<view class="containTitle">
					<image src="../../static/common/列表.png" mode=""></image>
					<text>计划名称：{
   
   {item.planName}}</text>
				</view>
				<view class="containTitle">
					<image src="../../static/common/绩效考核部门.png" mode=""></image>
					<text>监管分类：{
   
   {item.claName}}</text>
				</view>
				<view class="containTitle">
				<image src="../../static/common/考核.png" mode=""></image>
					<text>检查类型：{
   
   {item.dicValue}}</text>
				</view>
				<view style="margin-top: 10upx;" @tap="tasking(item)">
					<button type="primary">任务填报</button>
				</view>
			</view>
			<load-more :loadtext="loadtext" />
		</template>
		<template v-else>
			<view class="nodata">
				暂无数据
			</view>
		</template>
	</view>

</template>


<script>
	import loadMore from "../../components/common/load-more.vue";
	export default {
      
      
		components: {
      
      
			loadMore
		},
		data() {
      
      
			return {
      
      
				list: [],
				pageNo: 1,
				isFromSearch: true,
				loadtext: '',
				searchtext: ''
			}
		},
		onLoad() {
      
      
			this.pageNo = 1
			this.list = []
			this.getData()
		},
		// 监听搜索框文本变化
		onNavigationBarSearchInputChanged(e) {
      
      
			// if (e.text == null || e.text=='') {
      
      
			// 	this.searchtext = e.text;
			// 	this.pageNo = 1
			// 	this.getData()
			// 	console.log(this.pageNo)
			// 	console.log(111)
			// } else {
      
      
			// 	this.searchtext = e.text;
			// 	this.getSearch()
			// 	console.log(222)
			// }
		},
		// 监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
      
      
			if (e.text == null || e.text=='') {
      
      
				this.searchtext = e.text;
				this.pageNo = 1
				this.getData()
				console.log(this.pageNo)
				console.log(111)
			} else {
      
      
				this.searchtext = e.text;
				this.getSearch()
				console.log(222)
			}
		},
		// 监听下拉刷新
		onPullDownRefresh() {
      
      
			this.pageNo++;
			this.isFromSearch = false;
			this.getData();
			uni.stopPullDownRefresh();
		},
		// 监听页面触底事件
		onReachBottom() {
      
      
			this.pageNo++;
			this.isFromSearch = false;
			this.getData();
		},
		onShow() {
      
      
			this.list = []
			this.pageNo = 1
			this.getData()
		},
		methods: {
      
      
			getData() {
      
      
				this.config.getRequest('/sup/subject/app/listPageFeedback', {
      
      
					supType: 'supClassify_classifyType_0',
					subName: this.searchtext,
					pageNo: this.pageNo
				}).then(res => {
      
      
					if (res.data.code == 0) {
      
      
						var _data = res.data.data;
						 if (_data.length >0) {
      
      
						let searchList = []
						this.isFromSearch ? searchList = _data : searchList = this.list.concat(_data);
						this.list = searchList
						this.loadtext = '没有更多数据了'
						}else{
      
      
							this.isFromSearch = true
						}
					} else {
      
      

					}
				}).catch(err => {
      
      });
			},
			getSearch() {
      
      
				this.config.getRequest('/sup/subject/app/listPageFeedback', {
      
      
					supType: 'supClassify_classifyType_0',
					subName: this.searchtext,
					//pageNo: this.pageNo
				}).then(res => {
      
      
					if (res.data.code == 0) {
      
      
						this.list = res.data.data
					} else {
      
      

					}
				}).catch(err => {
      
      });

			},
			//任务填报
			tasking(index) {
      
      
				console.log(index)
				uni.navigateTo({
      
      
					url: '../../pages/detail/detail?detailData=' + JSON.stringify(index) + '&a=0'
				})
			},
		},
	}
</script>

<style>
	page {
      
      
		background-color: #fafafa;
	}

	.banner {
      
      
		width: 100%;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		overflow: hidden;
	}

	.contain {
      
      
		width: 88%;
		background-color: #FFFFFF;
		padding: 30upx;
		margin: 10upx auto;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	}

	.containTitle {
      
      
		font-size: 34upx;
		color: #333333;

	}

	.containTitle image{
      
      
		width: 42upx;
		height: 42upx;
		vertical-align: middle;
	
		margin-right: 6upx;
	}
		.containTitle text{
      
      
			vertical-align: middle;
		}

	.nodata {
      
      
		text-align: center;
		margin-top: 50upx;
	}
</style>