uniapp中使用mescroll实现选项卡上拉加载更多

uniapp中tabs和mescroll一起实现上拉加载更多

工具/原料

    hbuilder

    电脑

方法/步骤

    1

    在移动端开发中,很多页面都有使用tabs,并且选项卡的每一页都得支持上拉加载更多。

    uniapp中使用mescroll实现选项卡上拉加载更多uniapp中使用mescroll实现选项卡上拉加载更多

    2

    这个时候,就得使用mescroll插件。在tabs内容外层包裹一个mescroll-body组件,就可以直接使用了。

    <mescroll-body ref="mescrollRef" top="20" auto="false" @init="mescrollInit" :up="upOption" @up="upCallback">

    uniapp中使用mescroll实现选项卡上拉加载更多

    3

    该组件提供了上拉加载更多的方法,只需要按照需求传入相应的值发送请求,就可以直接实现上拉加载更多了。

    upCallback(page) {

    // if (!this.current) return this.current = 0

    const params = {

    page_no: page.num,

    page_size: page.size,

    category: this.list[this.current].category_id

    }

    // console.log(page.num)

    // let category = this.list[this.current].category_id

    // console.log(this.list[this.current].category_id)

    // let word = this.tabs[this.i].name // 具体项目中,您可能取的是tab中的type,status等字段

    API_Goods.getGoodsList(params).then(res=>{

    console.log(params.page_no)

    const { data } = res

    console.log(res)

    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;

    this.mescroll.endSuccess(data.length);

    //设置列表数据

    // if(page.num == 1) this.goodsList = []; //如果是第一页需手动制空列表

    this.goodsList = this.goodsList.concat(data); //追加新数据

    console.log(this.goodsList)

    }).catch(()=>{

    //联网失败, 结束加载

    this.mescroll.endErr();

    })

    },

    uniapp中使用mescroll实现选项卡上拉加载更多

    4

    有一点值得注意的是,在tabs的change方法中,一定要用this.mescroll.resetUpScroll() // 再刷新列表数据,否则在其中一个选项卡出现end的时候,其他几个选项卡就不能触发上拉事件了。

    uniapp中使用mescroll实现选项卡上拉加载更多uniapp中使用mescroll实现选项卡上拉加载更多END

注意事项

    this.mescroll.resetUpScroll() 一定要写在change事件里面

温馨提示:经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
免责声明:本文转载来之互联网,不代表本网站的观点和立场。如果你觉得好欢迎分享此网址给你的朋友。
转载请注明出处:https://www.i7q8.com/jiaoyu/2123.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年07月12日
下一篇 2023年07月12日
single-end

热门百科

single-end

相关推荐

  • 如何区别older和elder

    如何区别older和elder,older和elder的区别有哪些?让我们一起来看视频吧。...

    2024年03月28日
    0℃
  • 科目二定点停车与半坡起步操作技巧图解

    科目二定点停车与半坡起步操作技巧图解,小编只说一下定点停车与半坡起步的操作技巧,至于怎么打转向灯,按喇叭相信教练会教的。...

    2024年03月28日
    0℃
  • 申请美国本科有哪些可以加分的课外活动?

    申请美国本科有哪些可以加分的课外活动,在美国大学的申请要求中,我们常常提到“软实力”。课外活动作为“软实力”的一个方面,能成为招生官筛选学生的重要条件。因为,这些额外的课外活动能够让学生显的更加的优秀。同时,有甚多课外活动在申请美国大学的时候是能够加分的。那么,美国大学更看重什么样的课外活动?...

    2024年03月28日
    0℃
  • 学生如何办理韩国个人旅游签证?

    学生如何办理韩国个人旅游签证,去韩国旅游需要办理旅游签证,大家知道怎么办理签证吗?办理签证时申请人操作要小心,最好不要出错,一旦出错那么您的签证就有可能会被拒签。下面小编就为大家分享一些有关办签的相关说明,大家在办理签证之前需要先来了解一下,希望有利于您的签证办理。...

    2024年03月28日
    0℃
  • 你知道美国计算机专业都有哪些方向吗?

    你知道美国计算机专业都有哪些方向吗,计算机专业作为这些年来最受欢迎的专业,每年申请这个专业的同学都非常多,毕竟计算机领域的工作都是高收入。今天,为了准备申请美国计算机专业的你,就跟着慧德高端留学老师一起来看一下计算机都有哪些方向吧!...

    2024年03月28日
    0℃
关注微信