今天在uniapp插件市场里找到一个滚动加载的插件,用起来还不错,插件地址是:https://ext.dcloud.net.cn/plugin?id=4260
插件导入你自己的项目即可使用,下面是uniapp+thinkphp的示例代码:
需要注意的是:callback中的total传的是数据总条数;以及刷新事件时需要重置list;
<view class="page-wrap u-skeleton">
<data-list class="data-list listbox" ref="list" @load="getList" @refresh="handleRefresh">
<view class="list" v-for="(item,index) in list" :key="index"></view>
</data-list>
</view>
<style scoped lang="scss">
.page-wrap {
height: 100%;
.test-view {
height: 300rpx;
}
.navbar-content {
width: 100%;
display: flex;
padding: 30rpx;
align-items: center;
justify-content: space-between;
}
.u-icon {
margin-left: 30rpx;
}
.item-wrap {
display: flex;
margin: 10rpx;
padding: 30rpx;
align-items: center;
border-radius: 16rpx;
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
.avatar {
width: 150rpx;
height: 150rpx;
margin-right: 30rpx;
border-radius: 16rpx;
background-color: #c0c0c0;
}
.item {
width: 100rpx;
height: 30rpx;
margin-bottom: 10rpx;
border-radius: 16rpx;
background-color: #c8c7cc;
}
}
}
</style>
data() {
return {
list:[],
total: 0,
/*加载插件配置*/
showEmpty:true,
}
},
getList(data,callback){
let that = this;
console.log('data:',data);
uni.request({
url: that.api_url+'api/life.user/inviteenroll', //仅为示例,并非真实接口地址。
header: {
// 'X-Auth-Token': 123456, //授权token
'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
token:this.token,
},
data: {
page:data.page,
invite_id:that.invite_id,
},
method:'POST',
success: (res) => {
if(res.data.code == 1){
// that.list = res.data.data.data;
that.list = [...that.list, ...res.data.data.data];
if(res.data.data.data.length > 0){
callback({ list: that.list, total:res.data.data.total});
}else{
if(data.page <= 1){
callback({ list: that.list, total:res.data.data.total});
}else{
return false;
}
}
}
}
});
},
// 模拟请求数据刷新
handleRefresh(data, callback) {
let that = this;
uni.request({
url: that.api_url+'api/life.user/inviteenroll', //仅为示例,并非真实接口地址。
header: {
// 'X-Auth-Token': 123456, //授权token
'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
token:this.token,
},
data: {
page:data.page,
invite_id:that.invite_id,
},
method:'POST',
success: (res) => {
if(res.data.code == 1){
// that.list = res.data.data.data;
that.list = res.data.data.data;
callback({ list: that.list, total: res.data.data.total });
}
}
});
},
以下是TP后端代码:
/**
* 我的发布
*/
public function sport(){
$user = $this->auth->getUser();
$limit = input('limit',15,'intval');
$page = input('page',1,'intval');
$list = LifeSportModel::where(['user_id'=>$user['id']])->relation('user')->page($page,$limit)->order('id desc')->select();
$total = LifeSportModel::where(['user_id'=>$user['id']])->count();
$this->success(__('Operation completed'),['data'=>$list,'total'=>$total]);
}
发表评论 取消回复