Applet/pages/policy/index.vue

<template>
	<view class="container">
		<view class="top">
			<view class="search">
				<uni-easyinput class="uni-input" prefixIcon="search" v-model="searchVal" placeholder="请输入您要查询的政策名称"></uni-easyinput>
				<button class="searchBtn" type="default" size="mini" @click="searchBtn">搜索</button>
			</view>
		</view>
		<uni-list border class="list">
			<uni-list-item v-for="(item, index) in dataList" :key="index" :ellipsis="2" :title="item.title" link clickable  @click="listItemBtn(item)" ></uni-list-item>
		</uni-list>
		<uni-load-more :status="more" />
	</view>
</template>

<script>
	import request from '../../api/cms.js';
	export default {
		data() {
			return {
				searchVal: '',
				page: 0,
				size: 12,
				// more = 加载前， loading = 加载中， noMore = 没有更多
				more: 'more',
				dataList: []
			}
		},
		onShow: function() {
			// this.init();
		},
		async mounted() {
			this.getPolicyList({ typeName: 'policy' });
		},
		methods: {
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/details/index?id=${e.id}` })
			},
			// 搜索函数
			async getPolicyList(e) {
				this.page += 1;
				this.more = 'loading';
				if(this.searchVal !== '') e.title = this.searchVal;
				const res = await request.getArticleList({ pageNum: this.page, pageSize: this.size, ...e });
				this.dataList.push(...res.rows)
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(res.total / this.size) ? 'noMore' : 'more';
			},
			// 搜索函数
			searchBtn() {
				if(!this.searchVal || this.searchVal == '') return;
				this.reset();
				this.getPolicyList({ title: this.searchVal, typeName: 'policy' });
			},
			reset() {
				this.page = 0;
				this.dataList = [];
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getPolicyList();
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #fff;
	}
	.top {
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}
	.tabsBox {
		width: 100%;
		border-bottom: 1px solid #d3d3d3;
		display: flex;
	}
	.tab {
		width: 25%;
	}
	.text {
		display: block;
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	.current {
		color: #ff9302;
		border-bottom: 1px solid #ff9302;
	}
	.search {
		width: 90%;
		height: 2em;
		border: 1px solid #f3f3f3;
		background-color: #fff !important;
		border-radius: 12px;
		display: flex;
		margin: 20px auto;
	}
	.uni-easyinput {
		width: 70%;
		margin-left: 5%;
		height: 100%;
		font-size: 14px;
	}
	.uni-easyinput .uni-easyinput__content {
		border: none !important;
		height: 100%;
		line-height: 2em;
	}
	.searchBtn {
		width: 20%;
		background-color: #ff9302 !important;
		border: none;
		color: #fff !important;
		height: 2em;
		margin-top: 0.2em;
		margin-left: 4%;
		border-radius: 12px;
	}
	.list {
		display: block;
	}
</style>