当前位置: 代码迷 >> 综合 >> mint-ui loadmore的上拉兼容性问题
  详细解决方案

mint-ui loadmore的上拉兼容性问题

热度:104   发布时间:2023-10-29 20:20:12.0

loadmore的上拉加载在一些手机上表现没有任何问题,可用并且流畅(米粉表示毫无压力)。但是另外一些机型则是问题百出!

  1. ios上拉动特别费劲,有时上拉会出现一段空白,而不是mint-loadmore-bottom区域。这时上拉无效,需要再次上拉一到两次才能成功。
  2. 华为手机上的浏览器,包括pc上chrome的手机模式,上拉完全无效。

解决办法网上已经给出,就是对loadmore外层标签加个高度和overflow:auto/scroll。但是光加这些样式,在ios下滑动会变得卡顿,所以还要针对ios加个-webkit-overflow-scrolling: touch的属性。最后效果不可以说是完美,但是至少保证页面基本运行。

<section class="prdListWrap"><mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"><ul><li></li></ul></mt-loadmore>
</section><style scoped lang="scss">.prdListWrap{position: absolute;left:0;top:0;width:100%;height:100%;overflow:auto;padding-top: 3.7rem;box-sizing:border-box;-webkit-overflow-scrolling: touch;}
</style>

作者:muroujue
链接:https://www.jianshu.com/p/b70837d4e9e5
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  相关解决方案