Uni-app之微信小程序list组件
描述:这是一个在uni-app中list列表组件,上拉加载更多参考:uni-app的小程序HelloUni的模板——》的列表详情示例将HelloUni模板中的-——》components下的uni-load-more文件夹复制到你自己文件的components下在需要使用list组件的地方引入load-moreimport uniLoadMore from '@/components/uni-lo
·
描述:这是一个在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()
},
更多推荐
已为社区贡献10条内容
所有评论(0)