MUI踩坑记录——上拉加载后隐藏“没有更多了”

最新推荐文章于 2024-08-07 13:36:44 发布

WhiteYin

最新推荐文章于 2024-08-07 13:36:44 发布

阅读量9.6k

点赞数

分类专栏：前端HTML 文章标签： mui框架 js h5-app

本文链接：https://blog.csdn.net/lichking11/article/details/78134410

版权

这篇博客记录了在使用MUI框架开发H5-app时遇到的问题，即上拉加载完成后，'没有更多了'提示无法自动隐藏。作者尝试了设置display:none，但滚动条并未随之正常上滑。最终通过CSS动画实现动态隐藏，通过修改translate3d的y轴属性，使列表容器上下移动，成功解决问题。同时，作者提到mui.scrollTo()方法在这个场景下未达到预期效果。

摘要由CSDN通过智能技术生成

需求：

新闻中心页面，新闻以垂直列表展示，要求上拉动态加载新数据。当有新数据时加载数据并显示；当没有新数据时，提示“没有更多了”，并且在1s后消失。

解决方法：

使用MUI上拉加载控件：

mui.init({
//说明见官方文档
  pullRefresh : {
    container:'body',
    up : {
      height:50,
      auto:false,
      contentrefresh : "正在加载...",
      contentnomore:'没有更多数据了',
      callback :moreNews 
    }
  }
});

function moreNews(){
   
    //count初始化为0，只加载一次新数据
    if(count===