vue实现上拉刷新下拉刷新加载

vue移动端

详情前往我的码云
参考

下拉刷新加载

!<template>
<!-- 使用vant组件来写下来刷新加载 --><div><van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><div v-for="(item, index) in list" :key="index"><div @click="btn(item.id)">{{ item.title }}</div></div></van-list></div>
</template>
<script>
import { GetCode } from "../api/index";
export default {data() {return {list: [],limit: 16,//代表每页数量page: 1,//代表页数total: 1000, //总数loading: false,//vant中的loading效果finished: false//代表滑到底总数};},created() {},methods: {onLoad() {this.page += 1;//依次递加1this.getmain();},btn(e) {console.log(e);this.$router.push({name: "homeList",params: {id: e}});},getmain() {let params = {//拿到对应的入参limit: this.limit,page: this.page};GetCode(params).then(res => {this.loading = true;//在请求时打开loadingsetTimeout(() => {//这个定时器可写可不写 这边是更好看到loading效果if (res.data.success === true) {//判断请求成功状态this.loading = false;//请求成功关闭loading效果this.list =this.page == 1 ? res.data.data : this.list.concat(res.data.data);// 以上是对应数据 如果页数为1 对应相对数据 否则每次加载后对应的页数数量添加到以上页数对应的请求this.total = this.total;//这个是对应的总数this.finished = this.list.length >= this.total;//这个判断当接口数据长度与总数相同不加载显示对应文字} else {this.finished = true;//错误loading打开}}, 800);}).catch(err => {this.loading = true;//错误loading打开});}}
};
</script>
<style lang="scss" scoped>
div {div {div {margin-top: 10px;}}
}
</style>

上拉刷新下拉加载

!<template><div><van-pull-refresh success-text="刷新成功" v-model="isLoading" @refresh="onRefresh"><van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><div v-for="(item, index) in list" :key="index"><div @click="btn(item.id)">{{ item.title }}</div></div></van-list></van-pull-refresh></div></template>
<script>
import { GetCode } from "../api/index";
export default {data() {return {list: [],limit: 16, //代表每页数量page: 0, //代表页数total: 1000, //总数loading: false, //vant中的loading效果finished: false,count: 0,isLoading: false};},created() {},methods: {onLoad() {// 下拉刷新加载this.getmain();},btn(e) {console.log(e);this.$router.push({name: "homeList",params: {id: e}});},onRefresh() {// 上拉刷新setTimeout(() => {this.isLoading = false;this.page = 0;this.getmain();this.loading = false;}, 800);},getmain() {let params = {//拿到对应的入参limit: this.limit,page: this.page};GetCode(params).then(res => {setTimeout(() => {this.total = this.total; //这个是总数this.list =this.page == 0 ? res.data.data : [...this.list, ...res.data.data];this.page++;this.finished = this.list.length >= this.total;this.loading = false;}, 800);if (this.page >= this.total) {this.finished = true;this.loading = false;}}).catch(err => {this.loading = true; //错误loading打开});}}
};
</script>
<style lang="scss" scoped>
div {div {div {margin-top: 10px;}}
}
</style>

vue3请看这个

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！