一、这种方法是先获取到了全部数据,再通过前端去处理(有点儿笨,哈哈~~~)
<view class="carlis">
<view class="carli" v-for="(item,index) in deslist" :key="index">
<text class="carli_l">{{item.brandname}}</text>
<text class="carli_r">{{item.cars_model}}</text>
</view>
</view>
<view class="loading" @click="loading" style="height: 80upx;line-height: 80upx;margin-bottom: 16upx;text-align: center;">
点击加载更多...
</view>
export default {
data() {
return {
deslist: '', //数据
counter: 0, //每点一次加载更多+1
pageStart: 0,
pageSize: 5 //第一次显示5条,每加载一次原来基础上多五条
}
},
onLoad() {
this.getmsglist();//第一次加载数据
},
methods: {
//加载更多
loading: function() {
this.counter++;
this.pageStart = this.counter * this.pageSize;
this.getmsglist();
},
//获取列表信息
getmsglist: function() {
var _self = this;
_self.goodsid = uni.getStorageSync('goodsid');
uni.request({
url: _self._apiurl + "/app/goods/getgoodsdetail",
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
openid: _self.openid,
token: _self.token,
goods_id: _self.goodsid
},
success: (res) => {
console.log(res);
_self.deslist = res.data;
var initdata =_self.deslist;
var sum = _self.deslist.length;
if(sum>5){
_self.deslistshow=true;
}else{
_self.deslistshow=false;
}
if (sum - _self.pageStart < _self.pageSize) {
_self.pageSize = sum - _self.pageStart;
}
var newsum = _self.pageStart + _self.pageSize;
_self.deslist = _self.deslist.slice(0, newsum);
if(_self.deslist.length==initdata.length){
_self.deslistshow=false;
}
}
})
},
}
}
二、每滑动一次 ,就请求一次接口,返回数据
https://ext.dcloud.net.cn/plugin?id=632 插件链接
我是直接把自己需要列表循环好的页面全部写完了过后,在后面增加了这个插件 :
<template>
<view>
<view class="content">
<view class="contentlist" v-for="(item,index) in releaselist" :key="index">
<!--需要循环的内容-->
</view>
</view>
<!--使用插件-->
<ws-load-more ref="loadMore" @provider="provider" :pageSize="12"></ws-load-more>
</view>
</template>
<script>
import wsLoadMore from "../../components/wsure-load-more/load-more.vue";
export default {
components: {
wsLoadMore
},
data() {
return {
releaselist: '',//数据
page: 1, // 页
sum: 10 //一次10条
}
},
onLoad() {
this.getreleasemsg(function() {});
},
methods: {
//下拉刷新
provider(e) {
var that = this;
that.getreleasemsg(function() {
var releaselist = that.releaselist;
//向插件传入当前页数据
that.$refs.loadMore.pushData(releaselist);
})
},
//获取初始化列表
getreleasemsg: function(FUN) {
var _self = this;
uni.request({
url: _self._apiurl + "/app/goods/getmygoods",
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
page: _self.page,
sum: _self.sum
},
success: (res) => {
console.log(res);
_self._isplogin(res, function() {
_self.releaselist = res.data.data;
_self.page = _self.page + 1;
FUN();
})
}
});
},
}
}
</script>