天天看點

mint-ui loadmore的上拉相容性問題

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 >
  .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

來源:簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。