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

相关推荐

  • 行政管理毕业论文下载

    行政管理毕业论文下载,要下载行政管理毕业论文,可以登录中国知网免费入口,在中国知网无限制免费下载各学科毕业论文,硕士论文、博士论文都有,都可以整篇下载,还有学术论文、期刊论文等,按下图方法可成功打开知网免费入口网站,操作很简单。...

    2024年03月22日
    0℃
  • 如何收集学校社团的学生报名情况

    如何收集学校社团的学生报名情况,开学后,大学社团开始报名纳新,传统方式是直接下发社团报名表,学生填写后收回。那么如何快速收集学校社团的学生报名情况?...

    2024年03月22日
    0℃
  • 会计毕业论文怎么下载

    会计毕业论文怎么下载,可以从中国知网免费下载会计毕业论文,其它学科毕业论文也可以下载,按如图所示方法,可以成功找到知网免费入口并成功登录,在知网无限制免费下载各种论文。...

    2024年03月11日
    0℃
  • 科技论文怎么免费下载

    科技论文怎么免费下载,科技论文以其专业性较强而著称,该类论文的撰写也是相当的困难,要求具备一定的实验数据和测试数据才能完成。参考已经成发表过的科技论文,对于完成自己的论文是相当有帮助的,按下图方法可以成功登录中国知网免费入口,在知网无限制免费下载各学科论文,科技论文免费下载,硕士博士论文、学术论文都可以整篇下载,相......

    2024年02月21日
    0℃
  • 工商管理毕业论文怎么免费下载

    工商管理毕业论文怎么免费下载,工商管理毕业论文可按下图方法登录万方数据库免费入口,无限制免费下载各学科论文,学术论文、硕士博士论文都有,都可以免费整本下载,无任何限制,下载工商管理毕业论文很方便。...

    2024年02月12日
    0℃
关注微信