vue项目中基于vant组件,在h5中实现分页效果
使用vant中组件中List组件直接上代码,不懂可以私信。
<template>
<div class="box">
<van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
//list中包裹的代码体,根据实际情况自己定义
//主要原理:list组件包裹代码体,用@load="onLoad"绑定的这个事件再去请求下数据,并加以判断
<van-steps direction="vertical">
<van-step v-for="(item, index) in datas" :key="index">
<div class="one">{{ item.created_at | dataFormat }}</div>
<p class="two">{{ item.ex_name }}</p>
<p class="three">{{ item.title }}</p>
<a class="four" href="#">{{ item.link }}</a
><br />
</van-step>
</van-steps>
</van-list>
</div>
</template>
<script>
//报错的话就拿掉不需要的组件
import { Toast, Step, Steps, List } from 'vant';
export default {
name: 'App',
components: {
[Step.name]: Step,
[Steps.name]: Steps,
[List.name]: List,
},
data() {
return {
loading: false,
finished: false,
page: 1,
datas: [],
};
},
created() {
this.list();
},
methods: {
//list事件,可参考文档
onLoad() {
let that = this;
that.loading = true;
// console.log(++that.page);
this.$ajax('?s=App.Index.Notice', { page: ++this.page }, function (res) {
if (res.code == 200) {
that.loading = false;
if (res.data.data.length > 0) {
that.datas = that.datas.concat(res.data.data);
} else {
that.finished = true;
}
}
});
},
//要请求的数据
list() {
this.$ajax('?s=App.Index.Notice', { page: this.page }, function (res) {
if (res.code == 200) {
this.datas = res.data.data;
}
});
},
},
};
</script>