我们在查询自己一些历史记录的时候，是一个列表页，这个列表页往下滑，会自动加载。
今天记录的是如何使用vant组件应用到laravel项目中
假设现在要获取一个账户的提现列表，就可以用到该组件
首先看下从接口获取数据，
$page_num = $params['page_num'];//从前台定义之后传过来的变量
//进行查询
$data = Withdrawal::select()
->where('withdrawals.user_id','=','2')//当前Id
->orderBy('withdrawals.id',"desc")//倒序
->paginate(8, null, null, $page_num);//laravel自带分页
//字段语义化
foreach($data as &$val){
$val->time = date('Y-m-d',strtotime($val->created_at));
$val->status = Withdrawal::STATUS[$val->status];
$val->type = Withdrawal::TYPES[$val->type];
}
unset($val);下面看下前台html部分
贴上代码
<div v-show="shelly">
<div class="list_null" v-if="items == null || items==0" v-cloak>
<div class="list_null_word">暂无提现记录!</div>
</div>
<van-list v-model="loading" :finished="finished" @load="ShowLoad">
<div v-for="item in items" v-cloak class="with-box" >
<div class="with-box-left">
<div>单号:{{item.order_no ==''?'未知':item.order_no}}</div>
<div>提现类型:{{item.type ==''?'未知':item.type}}</div>
<div>提现状态:{{item.status == ''?'未知':item.status}}</div>
</div>
<div class="with-box-right" >
<div style="margin-top: -5px;">{{item.time == ''?'未知':item.time}}</div>
<div style="color:#101010;font-size: 20px;">
+{{item.trade_amount/100 ==''?0:item.trade_amount/100}}
</div>
</div>
</div>
</van-list>
</div>从上面开始说：v-show=“shelly” 是自己定义的，首先加载页面的时候 ，整块隐藏掉，接下去判断列表的内容为空的话
v-if="items == null || items==0"，就显示 暂无提现记录
否则就执行自动加载的组件。
先到这边，接下去将VUE.js部分,先看代码
var data_id = obj.id;
var page_num = 1;
var app = new Vue({
el:"#app",
data() {
return {
show:false,
items:[],
loading: false,
finished: false,
post_data: {},
total:"",
shelly:false,
};
},
mounted () {
var _self =this ;
var post_data = {
id: data_id,
method: 'withdraw.detail',
nonce:' withdraw.detail',
page_num: page_num,
};
axios.post('/api/v1',api_data_sign(post_data, 'mrf'))
.then(function (response) {
var data = response.data;
if(data.code == 200){
_self.items = response.data.data.data;
}
}).catch(function (error) {
console.log(error);
});
},
methods: {
onClickLeft(){
window.history.go(-1);
},
ShowLoad() {
page_num++;
if ($.isEmptyObject(this.post_data)) {
this.post_data = {
method: 'withdraw.detail',
nonce: 'withdraw.detail',
id: data_id,
page_num: page_num,
};
}
var _self = this;
axios.post('/api/v1', api_data_sign(this.post_data, 'mrf'))
.then(function (response) {
if (response.data.code == 200) {
var datas = response.data.data.data;
var total = response.data.data.total
var length = datas.length;
_self.shelly=true;
if (length == 0) {
_self.finished = true;
}else if(total<=_self.items.length){
_self.finished = true;
} else {
for (var i = 0; i < length; i++) {
_self.items.push(datas[i]);
}
}
_self.post_data.page_num++;
_self.loading = false;
}
}).catch(function (error) {
});
},
}
});从上往下开始讲，首页初始化变量var page_num = 1;传到接口那边可以使用，
return的值是要渲染的值，items是一个数组，组件的属性loading: false, finished: false,获取的条数total为空，定义的shelly为false,上述有提到
接下里是mouted,post请求我们拿数据的接口，将上面定义的page_num，赋予到page_num，准备传到接口那边拿数据，下面的
axios请求就是要循环的列表值，接下来是methods,ShowLoad方法就是组件的下拉刷新的重要部分，加载时候，定义的页面肯定是要++的，接下去，同样和接口进行请求，
在axios请求当中，如果数据请求正确的话：shelly为true就是代表显示出来的，然后进行判断，如果获取的列表数长度为0，_self.finished = true;就是不再下拉刷新，再如果总条数小于获取的长度，同样也是不再拉下刷新，否则最后执行下拉刷新
else {
for (var i = 0; i < length; i++) {
_self.items.push(datas[i]);
}如果数据请求错误的话，
_self.post_data.page_num++;
_self.loading = false;我们的组件使用就结束了，接下来看下我们的效果图
未拉下刷新前，只有渲染没有进行下拉刷新的数据请求
再次往下拉，就有了刷新请求v1
第一次使用这个组件，发现很方便，欢迎进行交流