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

电玩女神 2022-12-03 15:59 364阅读 0赞

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

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

1.  将HelloUni模板中的-——》components下的uni-load-more文件夹复制到你自己文件的components下  
    ![在这里插入图片描述][20200904144059458.png_pic_center]
2.  在需要使用list组件的地方引入load-more

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

并且在components中正确的注册  
![在这里插入图片描述][20200904144310668.png_pic_center]

1.  编辑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'
    				}
    				
    			},

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

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

[20200904144059458.png_pic_center]: /images/20221123/d6e038dc0bdb4b83bcdec962edc6458c.png
[20200904144310668.png_pic_center]: /images/20221123/b09a0db226774416a53c997e7a0bd1f2.png