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

tech2025-12-31  2

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

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

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

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

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

并且在components中正确的注册

编辑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' } }, 注意如果从其他页面返回回来时,需要在onshow生命周期中配置些参数 onShow() { // console.log("onShow") this.page.SkipCount =0; this.listData =[]; this.status = 'loading'; this.GetFireUnitListForSafe() },
最新回复(0)