使用better-scroll 做上拉加载 手机无法把内容显示完全

Question

做了个上拉加载,用的插件better-scroll 成功调用数据 然而在网页上么有任何问题 结果在手机测试就出问题,内容无法全部显示,一下是代码 请大佬帮忙看看!

<div class="bscroll" ref="bscroll" scroll-y>

       <ul>
              <!-- :to='"./doctorDetails?id="+item.DrId' -->
              <li v-for="(item, index) in seekDoctor" :key="index">
                  <router-link :to='"./doctorDetails?id="+item.DrId' class="is-doctor">
                      <div class="doctor-details">
                          <div class="img-box">
                              <img class="icon" :src="item.PicturePath" v-if="item.PicturePath" alt="">
                              <img class="icon" src="@/assets/seekDoctor/HeadPortrait_Doctor.png" v-else alt="">
                              <img class="label" v-show="item.IsPatientMain" src="@/assets/images/icon0810_04.png"
                                    alt="">
                          </div>
                      </div>
                      <div class="doctor-text">
                          <div class="name">
                              <span>{{item.DrName}}</span>
                              <span>{{item.DepartmentName}}</span>
                          </div>
                          <div class="referral">
                              <span>{{item.PositionName}}</span>
                              <span>{{item.HospitalName}}</span>
                          </div>
                          <div class="serve-box">
                              <div class="serve" v-for="(submitItem,submitIndex) in item.DrServiceItems"
                                    :key="submitIndex">
                                  <p class="">{{submitItem.SericeItemName}}</p>
                              </div>
                          </div>
                      </div>
                      <div class="count">
                          <p>问诊量:</p>
                          <p>{{item.VisitCount}}</p>
                      </div>
                  </router-link>
              </li>
              <div class="textData" v-if="textFlag">{{textData}}</div>
            </ul>
    </div>
    <script> 
    <!-- JS代码 -->
    // 上拉加载更多
scrollFn() {
  this.$nextTick(() => {
    if (!this.scroll) {
      this.scroll = new BScroll(this.$refs.bscroll, {
        click: true,
        scrollY: true,
        probeType: 3,
        pullUpLoad: {
          threshold: 100
        }
      });
    }
    this.scroll.on("pullingUp", () => {
      // 做些事情
      this.textFlag = true
      let sumPage = {
        PageIndex: (this.courrentPage += 1)
      };
      console.log(sumPage);
      setTimeout(() => {
        seekDoctor.getDoctor(sumPage).then(res => {
          this.seekDoctor = this.seekDoctor.concat(res.ReturnData);
          console.log(this.seekDoctor)
          this.textFlag = false
          if(this.TotalLength == this.seekDoctor.length) {
            this.textData = '没有更多数据'
          }
          console.log(this.seekDoctor.length)
          this.scroll.refresh()
          this.scroll.finishPullUp()
        });
      }, 1000);
      console.log("上拉加载");
      this.scroll.refresh()
      this.scroll.finishPullUp()
    });
  });
}
// 上拉加载更多
</script>
![效果图片][1]

Answer 1

Answer 2

高度计算不正确，那到数据要重新计算高度的，你检查一下你的逻辑

Answer 3

推荐个更好用强大的上拉加载，下拉刷新插件，mescroll
官网地址：http://www.mescroll.com/