l***@163.com
l***@163.com
  • 发布:2020-06-28 17:58
  • 更新:2020-07-02 10:39
  • 阅读:1822

#插件讨论# 【 【2020】下拉刷新上拉加载组件,支持原生页面和局部区域滚动 - wenju 】scrollbar-显示不正常

分类:uni-app

你好。。。你的软件太好用了。非常感谢。
但是我使用中发现1个问题,看了你的文档,但是没有找到解决问题的根本办法。
比如:

<a>我是头部占了位置</a>
<mescroll-body ref="mescroll" @init="mescrollInit" @down="down" @up="getList">
<view>下拉列表组件<view>
</mescroll-body>
<b>自定义的tabBar</b>

这样的话,显示列表正常,操作也正常。就是有个瑕疵。因为a,b组件的占位,导致整个屏幕的
scrollbar超高。请看附件。请问如何解决,谢谢啦。

2020-06-28 17:58 负责人:无 分享
已邀请:
l***@163.com

l***@163.com (作者)

破案了。子组件的问题。按照这样设置就好了。

  1. mescroll-body是原生界面的滚动,依赖于onPageScroll和onReachBottom的页面生命周期, 所以mescroll-body尽量不要写在页面的子组件里, 因为子组件无页面的这些生命周期; 如果非要写在子组件中,则需在页面给子组件传入onPageScroll,onReachBottom,否则无法触发上拉加载;
    推荐参考 mescroll-comp 和 mescroll-more 的案例, 通过mixins传入最简单:
    (或用 mescroll-uni , 无此限制, 无此问题)
wenju

wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件

<mescroll-body height="90%" > 试试  height可指定最小高..  

还有一种方案:可以把除了mescroll-body之外的都fixed定位;   
然后 <mescroll-body :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏">
  • l***@163.com (作者)

    用百分号我试过,不是特别准确。在有的机型刚刚好,有的或大或小,不能完美解决。。。fixed的话,改动的界面太多了。。。top和bottom也是,我用另一个组件,也要设置top,bottom,这样的话,不管是px还是rpx,在不同的屏幕上top表现各不相同。。。无法完美解决,我才换的您的组件。。。

    2020-06-29 13:08

  • wenju

    回复 l***@163.com: height支持传入rpx.. 如果要求比较精准 可以计算屏幕高度 - 底部tab高度 - 顶部tab高度

    2020-06-29 13:54

  • l***@163.com (作者)

    回复 wenju: 除了传入height的方法,还有其他方法没?

    2020-06-29 14:04

  • wenju

    回复 l***@163.com: 方便发一下简化的DEMO到我邮箱吗? 不是很清楚您这边的顶部tab和底部tab的样式 .. 2260429223@qq.com 您的问题就是避免少数据的时候出现滚动条 对吧

    2020-06-29 18:26

  • l***@163.com (作者)

    回复 wenju: 你好。DEMO已发至你的邮箱。谢谢啦。少于一屏的数据不应该出现滚动条,鼠标也不应该能拖动屏幕。

    2020-06-30 11:14

  • wenju

    回复 l***@163.com: 案例说把顶部tab和搜索改为fixed就可以,不用设置height; 但是我看了一下 你最外面的.uni-container有5px的padding; 然后.main-view又设置了margin-bottom:120rpx; 多出来的高度就是这个造成的

    2020-06-30 14:00

  • wenju

    回复 l***@163.com: 总之最快的解决方案就是设置height... 你可以偷懒一点 设置成 height="auto" 或者 height="60%"

    2020-06-30 14:02

  • l***@163.com (作者)

    回复 wenju: 上面说了。1. 设置60%的话,太不精确了。不同机型屏幕大小不一样。这个百分比就不对了。2.用到这个的地方太多了,有的上面有tab,还有search,还有其他组件。每一个设置不同的样式fixed和高度,还要计算,太麻烦了。 3. auto? 这个我可以试试。

    2020-06-30 18:12

  • wenju

    回复 l***@163.com: 60%其实已经为绝大部分机型预留出高度了 你可以试试; 如果还担心的话 可以改成50% 其实这个只是最小高而已 不一定要精确的

    2020-07-01 09:41

  • l***@163.com (作者)

    回复 wenju: 哦。理解了

    2020-07-01 13:01

  • l***@163.com (作者)

    回复 l***@163.com: 还有一个问题。。。上拉加载更多的时候。只需要设置? this.mescroll.endByPage(curPageLen, totalPage); 但是还有数据。没有上拉加载动画了。拉不动了。

    2020-07-01 13:06

  • wenju

    回复 l***@163.com: 需要看你传的curPageLen和totalPage是多少...建议输出一下; 如果curPageLen不满页(少于page.size)就没有更多数据; 如果当前页码(page.num)等于totalPage就没有更多数据

    2020-07-01 14:01

  • l***@163.com (作者)

    回复 wenju: response.items.length = 10, response.page.total = 36

    this.mescroll.endByPage(response.items.length, response.page.total);

    2020-07-01 14:55

  • l***@163.com (作者)

    回复 wenju: 我用totalPage = 3, num当前为1.。也不行。。。

    2020-07-01 14:56

  • l***@163.com (作者)

    回复 wenju: 你有微信没。。我觉得这是个bug。。。

    2020-07-01 15:01

  • l***@163.com (作者)

    回复 wenju: 我下面是我的测试显示。我特意把把page.size=2,数据上总共有22条,11页。。。按道理应该上拉能加载更多。结果屏幕只显示2条数据。。。不能上拉加载。。。

    2020-07-01 15:18

  • l***@163.com (作者)

    回复 wenju: 你好,我给你发邮件了。里面有个bug demo。。。

    2020-07-01 16:30

l***@163.com

l***@163.com (作者)

以下是我的显示截图。
我的代码如下:

   if (page && page.num == 1) {  
      this.list = [];  
    }  
    this.list = this.list.concat(response.items);  

    console.log('response.items.length=', response.items.length)  
    console.log('response.page.totalPages=', response.page.totalPages)  
    console.log('page.num', page.num)  
    console.log('this.mescroll.endByPage(response.items.length, response.page.totalPages)')  

    this.mescroll.endByPage(response.items.length, response.page.totalPages);
  • wenju

    page.size默认是10; 而你返回的数据只有2条; 不满一页 肯定无更多数据;

    你模拟一页2条数据的时候要配置 upOption:{page: {size: 2}}


    https://github.com/mescroll/mescroll/issues/236

    2020-07-01 16:27

  • l***@163.com (作者)

    回复 wenju: 我配置了size。。。我给你邮箱发了个demo。。。

    2020-07-01 16:31

  • l***@163.com (作者)

    回复 wenju: 我把 noMoreSize 设置为0都不行。。。

    2020-07-01 16:37

  • l***@163.com (作者)

    回复 wenju: 而且,你把我那个demo改一下。把数据改为10条。只是把页数设置为3。。还是一样的出不来上拉加载效果。

    2020-07-01 17:43

  • wenju

    回复 l***@163.com: mescroll-body是依赖page的滚动的 我看了一下 原因是数据太少 不满一屏 导致onReachBottom无法触发.. 所以最好一页还是10条吧 起码10条数据能够满一屏 滚动条可以滚动

    2020-07-01 18:29

  • wenju

    或者改为 mescroll-uni , 依赖scroll-view, 即使不满屏已可以触发上拉加载

    2020-07-01 18:29

  • l***@163.com (作者)

    回复 wenju: 你可以用我那个demo改成10+条数据,还是不行的。。。

    2020-07-01 21:58

  • l***@163.com (作者)

    回复 wenju: mescroll-uni可以。但是没有回到顶部按钮。而且,每个界面需要设置top高度。。好烦。

    2020-07-02 09:24

  • wenju

    回复 l***@163.com: 回到顶部按钮的offset默认1000px

    2020-07-02 09:39

  • wenju

    回复 wenju: 列表大于1000px才显示回到顶部按钮; 可以配置offset的值

    2020-07-02 09:40

  • l***@163.com (作者)

    回复 wenju: mescroll-body的问题我稍微有点头绪了。好像是不能用在子组件里面。。。在子组件里面无法上拉加载了。

    2020-07-02 09:50

  • l***@163.com (作者)

    回复 wenju: 我又给你发了个demo。。里面就是大于1屏(16条)的数据。如果把mescroll-body放在子组件里,就不行。如果写在主界面,就能正常触发上拉加载更多的事件。

    2020-07-02 10:19

l***@163.com

l***@163.com (作者)

下面的图就是我的配置信息。麻烦看一下。

该问题目前已经被锁定, 无法添加新回复