结合两篇文章后调试通的，现做个文档备份


代码由vuetify + mintUI结合，此文章是web app，兼容安卓和ios的下拉，之前跟着mintUi官方文档操作时，安卓没有问题，可是苹果一直下拉不了，现已经解决。

出现苹果此问题是

1.父容器没有设置滑动overflow:scoll 

2 你的内容开始是没有内容的，所有容器没有高度，导致在上拉的时候没办法监听到距离底部的距离，从而触发不了上拉记载。因此父容器没有设置高度，一般高度可以设置动态比较灵活。

--------------------------------------------------------------------------------------------

 

<template>
  <v-container>
    //wrapperHeight设备容器的高度，或者知道高度直接设置，不能用百分比
    <div
      class="loadmoreParent"
      ref="wrapper"
      :style="{
        '-webkit-overflow-scrolling': scrollMode,
        height: iSiPhone ? wrapperHeight + 'px' : ''
      }"
    >
      <v-loadmore
        :bottom-method="loadBottom"
        @bottom-status-change="handleBottomChange"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore"
      >
        <v-layout>
          <v-flex xs12 sm6 offset-sm3>
            <ul
              style="list-style:none;margin:0;padding-left: 0px;"
              v-for="(newsItem, index) in newsList"
              :key="index"
            >
              <v-card class="ma-2" flat>
                <br /><!-- class="content"-->
                <li @click="pushto('homeinformationetails', newsItem.newsId)">
                  <v-card-title primary-title>
                    <div>
                      <h4>{{ newsItem.newsTitle }}</h4>
                      <div>{{ newsItem.newsSummary }}</div>
                    </div>
                  </v-card-title>
                </li>
              </v-card>
            </ul>
          </v-flex>
        </v-layout>
        <div style="display:flex;justify-content:center">
          <mt-spinner
            type="triple-bounce"
            color="#26a2ff"
            v-if="showLoading === true"
          ></mt-spinner>
        </div>
        <v-card style="text-align:center" flat>
          <span class="mint-loadmore-text" v-show="showBottomStatus"
            >没有更多啦！</span
          >
        </v-card>
      </v-loadmore>
    </div>
  </v-container>
</template>
<script>
import { Loadmore } from "mint-ui";
import { getNewsList } from "@/api/personal/personalInfo";
export default {
  data() {
    return {
      showLoading: false,
      showBottomStatus: false,
      bottomStatus: "",
      topStatus: "",
      topText: "",
      topPullText: "下拉刷新",
      topDropText: "释放更新",
      topLoadingText: "加载中...",
      bottomText: "",
      bottomPullText: "上拉刷新",
      bottomDropText: "释放更新",
      bottomLoadingText: "加载中...",
      token: "",
      pageTotal: 0,
      current: 1,
      limit: 10,
      pageCount: 1,
      searchtext: "",
      newsList: [],
      card_text: "brute iriure accusata ne mea. Eos suavitate referrentur ad",
      scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      allLoaded: false,//是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了

      wrapperHeight: "",
      iSiPhone: ""
    };
  },
  
  components: {
    "v-loadmore": Loadmore, // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
    // 推荐应用组件时用a-b形式起名
  },
  methods: {
    
    loadBottom: function() {
      // this.handleBottomChange("loading");
      // 上拉加载
      // this.more(); // 上拉触发的分页查询
      this.a = true;
      if (this.current < this.pageCount) {
        this.showLoading = true;
        this.current++;
        this.getNewsList();
        // this.handleBottomChange("loadingEnd");
      } else {
//是否是最后一页，如此没有数据则设置不能上拉
        this.showBottomStatus = true;
        this.allLoaded = true;//true是禁止上拉加载
      }
      setTimeout(() => {
        this.$refs.loadmore.onBottomLoaded(); //固定方法，查询完要调用一次，用于重新定位
      }, 500);
    },
    handleBottomChange(status) {
      // this.$refs.alert.alertDia(true, "info", "!a");
      this.allLoaded = false;
      // this.bottomStatus = status;
    },
//查询数据的接口，自己可以构造数据，我这边是调用后台接口
    getNewsList() {
      var that = this;
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      getNewsList({
        page: that.current + "",
        limit: that.limit + "",
        title: that.searchtext
      }).then(response => {
        that.showLoading = false;
        that.pageTotal = response.data.data.totalCount;
        that.pageCount = Math.ceil(that.pageTotal / that.limit);
        var temp = response.data.data.list;
        for (var n = 0; n < temp.length; n++) {
          that.newsList.push(temp[n]);
        }
// 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
            
        that.$nextTick(() => {
          if (isiOS == true) {
            that.scrollMode = "touch";
          }
        });
      });
    },
  },
  mounted() {
//初次访问查询列表
    this.getNewsList();
    // 判断安卓还是ios
    this.iSiPhone = navigator.userAgent.includes("iPhone");
    if (this.iSiPhone) {
      this.wrapperHeight =
        document.documentElement.clientHeight -
        this.$refs.wrapper.getBoundingClientRect().top;
    } else {
      return false;
    }
  }
};
</script>
<style scoped>
.loadmoreParent {
  overflow: scroll;
}
</style>

上面的除了<v-loadmore>是mintUI外，其他的<v-container> <v-card>等等这些标签是vuetify移动端框架的，自己做demo可以用div代替即可。