一，二次封装的组件代码

<template><van-pull-refreshv-model="refreshing"@refresh="onRefresh"success-text="已为您刷新成功"><van-listv-model:loading="myLoading":finished="finished"finished-text="没有更多了"@load="onLoad"><div class="item-list" v-for="item in list" :key="item"><slot :item="item"></slot></div><imgsrc="@/assets/img/empty.png"alt=""class="empty-image"v-if="list.length === 0"/></van-list></van-pull-refresh>
</template>
<script setup>
import { ref, computed } from 'vue';
let emits = defineEmits(['update:loading','update:finished','update:pageCurrent','update:pageSize','getList'
]);
let props = defineProps({loading: {type: Boolean,require: true,default: false},finished: {type: Boolean,require: true,default: false},list: {type: Array,require: true,default: () => []},pageCurrent: {type: Number,require: true,default: 1},pageSize: {type: Number,require: true,default: 10}
});
const refreshing = ref(false);
let timeout;
const myLoading = computed({get: () => props.loading,set: val => {emits('update:loading', val);}
});
//加载
const onLoad = () => {if (refreshing.value) {refreshing.value = false;emits('update:finished', false);emits('update:loading', true);emits('update:pageCurrent', 1);}emits('getList');
};
//防抖处理，1s内只能下拉刷新一次
const onRefresh = () => {if (timeout) {clearTimeout(timeout);}timeout = setTimeout(onLoad, 1000);
};
</script>
<style lang="scss" scoped>
.van-pull-refresh {min-height: calc(100vh - 90px);:deep().van-pull-refresh__track {min-height: calc(100vh - 90px);}:deep() .van-pull-refresh__head {color: #8d8c8c;}:deep() .van-loading__text {color: #8d8c8c;}:deep() .van-loading__circular,.van-loading__text {color: #8d8c8c;}
}
.empty-image {margin-top: 50px;width: 50%;
}
</style>

二，父组件的使用

<template><div class="order-box"><VantRefreshv-model:pageCurrent="pageCurrent"v-model:pageSize="pageSize"v-model:loading="loading"v-model:finished="finished":list="list"@getList="getList"><template #default="slotProps"><OrderListItem :item="slotProps.item"></OrderListItem></template></VantRefresh></div>
</template>
<script setup>
import OrderListItem from './componcents/OrderListItem.vue';
import VantRefresh from '@/componcents/vant-refresh/VantRefresh.vue';
import { ref, onActivated } from 'vue';
import { httpPost } from '@/vue-use/useHttp.js';
const pageCurrent = ref(1); //当前页
const pageSize = ref(10); //每页个数
const list = ref([]); //数据列表
const loading = ref(false); //开启加载
const finished = ref(false); //已经到底了
//获取列表数据
async function getList() {let params = {TXCODE: 'STN011',pageCurrent: pageCurrent.value,pageSize: pageSize.value};const res = await httpPost(params);const orderList = res.data.orderList;if (pageCurrent.value === 1) {list.value = orderList;} else {list.value = list.value.concat(orderList);}console.log('我的订单列表', list.value);loading.value = false;pageCurrent.value++;if (res.data.orderList.length < pageSize.value) {finished.value = true;}
}
</script>
<style lang="scss" scoped>
.order-box {height: calc(100vh - 90px);padding-bottom: 180px;box-sizing: border-box;overflow: scroll;
}
</style>

三，解析

主要是用到这三个知识点

1，v-model:bindName

属性绑定，然后子组件props接收后，要要修改父组件的值，只需要emits(‘update:finished’, newValue)即可。无需再父组件中再调用函数。

2，computed的set函数

为了避免子组件自动变更props的值，通过computed进行一次转化，利用set函数变更父组件中的值。

3，作用域插槽

这里是父组件把list传给子组件使用，子组件又把list的item绑定到插槽上，提供给父组件使用。

vant组件二次封装-下拉刷新列表组件相关推荐

android自带下拉阻尼动画,android 有阻尼下拉刷新列表的实现方法
本文将会介绍有阻尼下拉刷新列表的实现,先来看看效果预览: 这是下拉状态: 这是下拉松开手指后listView回滚到刷新状态时的样子: 1. 如何调用虽然效果图看起来样子不太好看,主要是因为那个蓝色的 ...
android下拉菜单刷新,android下拉刷新列表实现（pull to refresh）
android中提供了ListView控件,listview能够为我们展现丰富的内容,有时候我们为了提升用户体检,需要更炫而且更好用户体验的效果,pull to refresh(下拉刷新列表效果)就应 ...
Android RecyclerView封装下拉刷新与上拉加载更多
1 scanlistlibrary 基础组件说明(基于 RecyclerView的封装) 基本数据列表(支持下拉刷新与上拉加载更多) 九宫格数据显示封装(支持下拉刷新与上拉加载更多) 瀑布流数据显示封 ...
Android开发笔记（一百二十三）下拉刷新布局SwipeRefreshLayout
SwipeRefreshLayout 下拉刷新布局SwipeRefreshLayout是Android又一与时俱进的控件,顾名思义它随着用户手势向下滑动就会触发刷新操作.从实际的下拉效果来看,Swip ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
PullToRefreshScrollView下拉刷新开源组件分析
该库被使用较多,而其manual又较为简单.所以决定分析一下,先从几个问题入手: icon怎么做到随着下拉的进行而联动旋转的? 通过关系图发现我们所有用到的组件都继承自PullToRefreshBas ...
原生小程序下拉刷新列表且保存之前的数据
用concat这个方法存入新数组中上拉加载时再传页数回去就好了如果把加载列表的方法写在onShow里面的话建议多加一个判断不然会出先重复数据
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
html仿照聊天下拉刷新,h5实现下拉刷新，模拟原生下拉刷新，封装组件
上一篇,我们实现了h5 实现向左平滑,出现按钮操作,封装组件,模拟购物车左滑删除,现在我们将要实现一个下拉刷新的组件,模拟原生下拉刷新的操作.这对h5手势的要求也是蛮高的,接下来,我们就一步一步的实现 ...
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
<template><div class="sg-page-body"><div class="sg-list"><v ...

vant组件二次封装-下拉刷新列表组件

一，二次封装的组件代码

二，父组件的使用

三，解析

1，v-model:bindName

2，computed的set函数

3，作用域插槽

vant组件二次封装-下拉刷新列表组件相关推荐

最新文章

热门文章