您现在的位置是：网站首页> 编程资料编程资料

Vue vant-ui框架实现上拉加载下拉刷新功能_vue.js_

2023-05-24 400人已围观

简介 Vue vant-ui框架实现上拉加载下拉刷新功能_vue.js_

下拉刷新效果：

知识点速记

基本用法

List通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

下拉刷新

List 组件可以与PullRefresh组件结合使用，实现下拉刷新的效果。

注意事项：

  • v-model ： 是否处于加载状态，加载过程中不触发load事件
  • finished： 是否已加载完成，加载完成后不再触发load事件
  • offset ： 滚动条与底部距离小于 offset 时触发load事件
  • loading-text加载过程中的提示文字
  • finished-text加载完成后的提示文字

List有以下三种状态，理解这些状态有助于你正确地使用List组件：

  • 非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
  • 加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
  • 加载完成，finished为true，此时不会触发load事件

在每次请求完毕后，需要手动将loading设置为false，表示加载结束

事件使用：@load方法

滚动条与底部距离小于 offset 时触发

代码实现

1.页面布局

2.样式

.myOrder{ height: 100vh; overflow-y: auto; } ::v-deep.van-cell { font-size: 14px; } .capaIttem { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06); border-radius: 24px; background: #fff; position: relative; } ::v-deep.van-cell { padding: 10px 0; } ::v-deep.van-cell { font-size: 40px; line-height: 40px; font-size: 30px; } ::v-deep.van-field__left-icon .van-icon { font-size: 30px; } ::v-deep.van-tag { font-size: 24px; line-height: 40px; } ::v-deep.van-button--small { height: 60px; font-size: 24px; } ::v-deep.van-tabs--line .van-tabs__wrap { height: 88px; } ::v-deep.van-tab { font-size: 30px; } .searchBtnFixed { position: fixed; top: 0; left: 80px; height: 92px; line-height: 92px; z-index: 1000; width: 86%; overflow: hidden; } ::v-deep.van-search { position: absolute; top: -8px; // padding: 13px; width: 100%; } ::v-deep.van-search__content { background: #eeeeee; border-radius: 16px; padding: 5px 10px; } .focusSearch ::v-deep.van-icon-clear { padding-right: 160px; } // 搜索 .onSearch { position: absolute; right: 50px; top: 28px; font-size: 30px; height: 36px; line-height: 36px; border-left: 1px solid #cccccd; padding-left: 30px; color: #024ee0; } // 新增 .focus-con { display: flex; justify-content: space-between; border-bottom: 1px solid #ebedf0; padding-bottom: 20px; } .capa-title { border-bottom: 1px solid #ebedf0; padding-bottom: 20px; display: flex; align-items: center; } .focus-title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .vipIcon { width: 72px; height: 34px; } .capa-box { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; } .capa-body { background: #f5f8ff; border-radius: 0.13333rem; padding: 0.33333rem; } .capa-con { display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .content-left, .content-right { display: flex; justify-content: space-between; align-items: center; img { width: 0.5rem; height: 0.5rem; } } .capa-time { display: flex; justify-content: space-between; align-items: center; } .time-img { display: flex; align-items: center; } .capaImg { width: 30px; } .timeColor { font-weight: 700; color: #024ee0; } .order-group { display: flex; align-items: center; } .ellipsis-orderNumber{ span{ display: inline-block; width: 310px; } } .ellipsis-txt { display: inline-block; max-width: 200px; text-align: start; } .shipName { font-weight: 600; display: flex; align-items: center; } .orderNameWidth{ max-width: 220px; } .ellipsis-content{ width: 400px; } .priceContent{ display: flex; justify-content: flex-end; } .floatRight{ float: right; } .borderRaduis { border-radius: 10px; height: 56px; .van-button__text { font-size: 26px; } } .huoIcon{ width: 26px; height: 26px; } .tagStyle{ background-color: #fff !important; } .contactTel { width: 90%; border-radius: 10px; } .popup-header{ height: 100px; text-align: center; color:#fff; background: #024EE0; line-height: 100px; } .contactTel ::v-deep.van-popup__close-icon--top-right{ top:26px !important; color:#fff !important; } .popup-box{ margin:60px 50px 30px; } .popup-btn{ width: 100%; border-radius: 20px; font-size: 36px; } .popupTitle { box-sizing: border-box; padding: 35px 0 61px 0; font-size: 32px; color: #333333; font-weight: 500; } .imgContent { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; margin-bottom: 30px; padding: 0 10px; li { width: 125px; height: 125px; margin-bottom: 37px; background-color: black; margin-right: 25px; } li:nth-of-type(4n) { margin-right: 0; } }

3.方法

data数据定义：

data() { return { zwdd:require("../../assets/img/zwdd.png"), titleName: "我要开票", arrowTrue: true, page: 1, pageSize: 10, isLoading: false, loading: false, finished: false, noData: false, contractData: [], timer:null, }; },

加载更多方法onLoad：

// 加载更多 onLoad() { this.loading = true; this.timer = setTimeout(() => { this.page++; this.getInvoicingContractListFun(); }, 1000); },

下拉刷新方法onRefresh：下拉刷新调用接口，并且页数=1

 // 刷新 onRefresh() { this.isLoading = true; this.page = 1; if (this.contractData.length == 0) { this.isLoading = false; } this.getInvoicingContractListFun(); },

处理数据列表方法getInvoicingContractListFun:

调用接口，传递相应的参数，获取到数据，去判断处理数据数据的加载，数据合并操作，利用定义的loading、finished、isLoading控制数据上拉数据加载。

 // 数据列表方法 getInvoicingContractListFun() { let params = { carrierUserId: this.id, pageNum: this.page, pageSize: this.pageSize }; getInvoici
                
                

                

                                            
上一篇：Vue3中v-if和v-for优先级实例详解_vue.js_

                                                                
下一篇：Vue3计算属性和异步计算属性方式_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网