Uni-app之微信小程序list组件

描述：这是一个在uni-app中list列表组件，上拉加载更多

参考：uni-app的小程序HelloUni的模板——》的列表详情示例

1. 将HelloUni模板中的-——》components下的uni-load-more文件夹复制到你自己文件的components下
   

2. 在需要使用list组件的地方引入load-more

import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

并且在components中正确的注册

3. 编辑list内容

<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="value.cover"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ value.title }}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{ value.author_name }}</text>
							<text>{{ value.published_at }}</text>
						</view>
					</view>
				</view>
			</view>
	</view>
	<!--上拉加载更多->
	<uni-load-more :status="status"  :icon-size="16" :content-text="contentText" />

//数据
data() {
			return {
				
				page:{
					SafeUserId:this.$store.state.userInfo.userId,
					FireUnitName:'',
				},
				totalCount:0,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				reload: false,
				last_id:'',
				listData:[],
			}
		},
//获取列表
			GetFireUnitListForSafe(){
				this.$http.get(this.$api.GetFireUnitListForSafe,{data:this.page}).then(res=>{
					console.log(res)
					this.totalCount  = res.data.result.totalCount;
					if(res.data.result.totalCount >0){
						console.log("大于0")
						let list = res.data.result.items
						this.listData = this.reload ?list : this.listData.concat(list);
						this.last_id = list[list.length - 1].fireUnitId;
						this.reload = false;
					}else{
						console.log("小于0")
						this.listData = [];
					}
					if(this.totalCount == this.listData.length){
						this.reload = false;
						this.status = 'noMore'
					}
				})
			},
			//上拉加载更多
			onReachBottom() {//页面上拉触底事件的处理函数,下滑加载更多
				if(this.totalCount > this.listData.length){//如果totalCount大于listData.length就加载更多
					this.status = 'more';
					this.page.SkipCount  = this.listData.length
					this.GetFireUnitListForSafe();
				}else{//停止加载
					this.status = 'noMore'
				}
				
			},

4. 注意如果从其他页面返回回来时，需要在onshow生命周期中配置些参数

onShow() {
			// console.log("onShow")
			this.page.SkipCount =0;
			this.listData =[];
			this.status = 'loading';
			this.GetFireUnitListForSafe()
		},