上拉刷新

src/views/Bill/record.vue

@@ -3,79 +3,113 @@
     <div class="header">
     <div class="header">
       <HeaderW :title="title" />
       <HeaderW :title="title" />
     </div>
     </div>
-    <div class="container-wrap">
-      <!--公积金扣费-->
-      <div class="list">
-        <div class="title">
-          <div class="title_info">公积金扣费</div>
-          <i>-160.00</i>
-        </div>
-        <p>
-          <span>11-20 12:20</span>
-        </p>
-      </div>
-      <!--五险扣费-->
-      <div class="list">
-        <div class="title">
-          <div class="title_info">五险扣费</div>
-          <i>-160.00</i>
-        </div>
-        <p>
-          <span>11-20 12:20</span>
-        </p>
-      </div>
-      <!--账单扣费-->
-      <div class="list">
-        <div class="title">
-          <div class="title_info">账单扣费</div>
-          <i>-160.00</i>
-        </div>
-        <p>
-          <span>11-20 12:20</span>
-        </p>
-      </div>
-      <!--转入到人事代理账户-->
-      <div class="list">
-        <div class="title">
-          <div class="title_info">转入到人事代理账户</div>
-          <i>-160.00</i>
-        </div>
-        <p>
-          <span>11-20 12:20</span>
-        </p>
-      </div>
-      <!--企业会员费-->
-      <div class="list">
-        <div class="title">
-          <div class="title_info">企业会员费</div>
-          <i>-160.00</i>
+
+    <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
+      <div class="container-wrap" id="container-wrap">
+        <div class="list" v-for="(item, index) in dataList" :key="index">
+          <div class="title">
+            <div class="title_info">{{ item.feeType }}</div>
+            <i>{{ item.amount }}</i>
+          </div>
+          <p>
+            <span>{{ item.dateTime }}</span>
+          </p>
         </div>
         </div>
-        <p>
-          <span>{{test}}</span>
-        </p>
       </div>
       </div>
-
-    </div>
+    </mescroll-vue>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import { Icon } from "vant";
 import { Icon } from "vant";
-import {HeaderW} from "@/components"
+import { HeaderW } from "@/components";
+import MescrollMixins from "../../assets/js/MescrollMixins.js";
+import MescrollVue from "mescroll.js/mescroll.vue";
+import { mapActions } from "vuex";
 export default {
 export default {
   components: {
   components: {
     HeaderW,
     HeaderW,
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
+    MescrollVue
   },
   },
+  mixins: [MescrollMixins],
   data() {
   data() {
     return {
     return {
       title: "11月资金记录",
       title: "11月资金记录",
-      data:{
-        test:''
-      }
+      mescrollUp: {
+        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
+        page: {
+          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+          size: 10 // 每页数据的数量
+        },
+        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
+        toTop: {
+          src: "./static/mescroll/mescroll-totop.png" // 回到顶部按钮的图片路径,支持网络图
+        },
+        empty: {
+          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
+          warpId: "dataList", // 父布局的id;
+          icon: "./static/mescroll/mescroll-empty.png", // 图标,支持网络图
+          tip: "暂无相关数据~" // 提示
+        },
+        lazyLoad: {
+          use: true // 是否开启懒加载,默认false
+        }
+      },
+      dataList: [
+        {
+          feeType: "企业会员费",
+          dateTime: "2020-04-03 15:31:22",
+          amount: "-500.00"
+        }
+      ]
     };
     };
   },
   },
   methods: {
   methods: {
+    ...mapActions(["loadRecord"]),
+    // mescroll组件初始化的回调,可获取到mescroll对象
+    mescrollInit(mescroll) {
+      this.mescroll = mescroll;
+    },
+    upCallback(page, mescroll) {
+      this.loadRecord({ accountId: "2319680", page: page.num, pageSize: "10" }).then(
+        resdata => {
+          console.log(JSON.stringify(resdata));
+          let arr = resdata.list;
+          // 如果是第一页需手动制空列表
+          if (page.num === 1) this.dataList = [];
+          // 把请求到的数据添加到列表
+          this.dataList = this.dataList.concat(arr);
+          // 数据渲染成功后,隐藏下拉刷新的状态
+          this.$nextTick(() => {
+            mescroll.endSuccess(arr.length);
+          });
+        },
+        err => {
+          mescroll.endErr();
+        }
+      );
+      // 模拟联网
+      // this.getListDataFromNet(
+      //   this.pdType,
+      //   page.num,
+      //   page.size,
+      //   arr => {
+      //     // 如果是第一页需手动制空列表
+      //     if (page.num === 1) this.dataList = [];
+      //     // 把请求到的数据添加到列表
+      //     this.dataList = this.dataList.concat(arr);
+      //     // 数据渲染成功后,隐藏下拉刷新的状态
+      //     this.$nextTick(() => {
+      //       mescroll.endSuccess(arr.length);
+      //     });
+      //   },
+      //   () => {
+      //     // 联网异常,隐藏上拉和下拉的加载进度
+      //     mescroll.endErr();
+      //   }
+      // );
+    },
     onClickLeft() {
     onClickLeft() {
       console.log(1);
       console.log(1);
     },
     },
@@ -90,7 +124,6 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-
 .container-wrap {
 .container-wrap {
   padding: 0 16px;
   padding: 0 16px;
   .list {
   .list {