vue 使用mint

解决了官网中下拉刷新存在的问题

1<template>
2  <div class="tmpl">
3    <nav-bar title="商品列表"></nav-bar>
4    <div class="main-body" ref="wrapper" :style="{ height: (wrapperHeight-50) + 'px' }">
5      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="isAutoFill">
6        <ul class="mui-table-view mui-grid-view">
7          <li v-for="(item,index) in datas" :key="index" class="mui-table-view-cell mui-media mui-col-xs-6">
8            <a>
9              <img class="mui-media-object" v-lazy="item.img">
10              <div class="mui-media-body" v-text="item.title"></div>
11            </a>
12          </li>
13        </ul>
14      </mt-loadmore>
15    </div>
16  </div>
17</template>
18
19<script>
20export default {
21  name: "goodslist",
22  data() {
23    return {
24      datas: [],
25      //可以进行上拉
26      allLoaded: false,
27      //是否自动触发上拉函数
28      isAutoFill: false,
29      wrapperHeight: 0,
30      courrentPage: 0
31    };
32  },
33  created() {
34    this.loadFrist();
35  },
36  mounted() {
37    // 父控件要加上高度，否则会出现上拉不动的情况
38    this.wrapperHeight =
39      document.documentElement.clientHeight -
40      this.$refs.wrapper.getBoundingClientRect().top;
41  },
42  methods: {
43    //   下拉刷新
44    loadTop() {
45      this.loadFrist();
46    },
47    // 上拉加载
48    loadBottom() {
49      this.loadMore();
50    },
51    // 下来刷新加载
52    loadFrist() {
53      this.$axios
54        .get("goodslist1.json")
55        .then(response => {
56          this.courrentPage = 0;
57          this.allLoaded = false; // 可以进行上拉
58          this.datas = response.data.message;
59          this.$refs.loadmore.onTopLoaded();
60        })
61        .catch(error => {
62          console.log(error);
63          alert("网络错误，不能访问");
64        });
65    },
66    // 加载更多
67    loadMore() {
68      this.$axios
69        .get("goodslist.json")
70        .then(response => {
71          // concat数组的追加
72          this.datas = this.datas.concat(response.data.message);
73          if (this.courrentPage > 2) {
74            this.allLoaded = true; // 若数据已全部获取完毕
75          }
76          this.courrentPage++;
77          this.$refs.loadmore.onBottomLoaded();
78        })
79        .catch(error => {
80          console.log(error);
81          alert("网络错误，不能访问");
82        });
83    }
84  }
85};
86</script>
87
88<!-- Add "scoped" attribute to limit CSS to this component only -->
89<style scoped>
90.main-body {
91  /* 加上这个才会有当数据充满整个屏幕，可以进行上拉加载更多的操作 */
92  overflow: scroll;
93}
94</style>