Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

The project implementation built on NuxtJS 2.x, mescroll.js is 1.4.1

Mescroll introduction: Refined pull-down refresh and pull-up loading JS framework

  • Native JS implementation, not dependent on jquery, Zepto

  • Support the Vue

  • Support uni-app, a set of multi-terminal running code, perfect for Android, iOS, mobile browsers

  • Compatible with mainstream PC browsers

  • Axios document

  • Mescroll website

The installation

npm install --save mescroll.js
Copy the code

encapsulation

  1. Refresh the configuration from the drop-down listdefaultMescrollDown
  2. Pull-up load configurationdefaultMescrollUp
  3. Whether to allow ios bounce to bounce backisBounce
<template>
  <! -- Basic structure of mescroll scroll area -->
  <mescroll-vue
    ref="mescroll"
    :down="mescrollDown"
    :up="mescrollUp"
    @init="mescrollInit"
  >
    <! -- Content area -->
    <slot></slot>
  </mescroll-vue>
</template>

<script>
  // Introduce the mescroll component
  import MescrollVue from "mescroll.js/mescroll.vue";

  export default {
    name: "Mescroll".components: {
      MescrollVue,
    },
    props: {
      downConfig: {
        type: Object.default: () = >{},},upConfig: {
        type: Object.default: () = >{},}},data() {
      return {
        mescroll: null.// Mescroll instance object
        defaultMescrollDown: {
          // The configuration of the pull-down refresh (if the logic is the same as that of the pull-up load processing, mescrollDown is not written)
          auto: true.// Whether to automatically execute a pull-down refresh callback after initialization
          callback: this.downCallback,
          textInOffset: "pull down to refresh".// Drop refresh
          textOutOffset: "release update".// Release updates
          textLoading: "loading"./ / load
        },
        defaultMescrollUp: {
          // Pull-up loaded configuration
          use: false.// Whether to enable pull-up loading
          auto: false.callback: this.upCallback, // Pull back; Callback: function(page, mescroll) {}
          // Here are some common configurations.
          page: {
            num: 0.// The current page defaults to 0 and is incremented by 1 before the callback; Callback (Page) starts at 1
            size: 10.// Number of data items per page. Default value: 10
          },
          htmlNodata: '<p class="upwarp-nodata">-- END --</p>'.noMoreSize: 5.// If the list has no data, you can set the total number of lists to be greater than 5 to display no more data; Avoid lists with too little data (e.g., only one data). Displaying no more data would not look good, which is why no more data is sometimes not displayed
          toTop: {
            // Return to the top button
            src: "./static/mescroll/mescroll-totop.png".// Image path, default null, support network graph
            offset: 1000.// Scroll the list 1000px before it shows back to the top button
          },
          empty: {
            // The first page of the list has no data. The display is displayed only when warpId is configured
            warpId: "xxid".// The id of the parent layout (version 1.3.5 supports passing dom elements)
            icon: "./static/mescroll/mescroll-empty.png".// Icon, default null, support network diagram
            tip: "No relevant data at present ~"./ / hint}},dataList: [].// List data
      };
    },
    computed: {
      mescrollDown() {
        return Object.assign(this.defaultMescrollDown, this.downConfig);
      },
      mescrollUp() {
        return Object.assign(this.defaultMescrollUp, this.upConfig); }},// If no back to top button or isBounce is configured, beforeRouteEnter is not written
    beforeRouteEnter(to, from, next) {
      next((vm) = > {
        // Find the current mescroll ref and call the beforeRouteEnter method of the child mescroll-vue
        // When entering the route, scroll to the original list location and revert to the top button and isBounce configuration
        vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
      });
    },
    // beforeRouteLeave is not written if there is no back to top button or isBounce configured
    beforeRouteLeave(to, from, next) {
      // Find the current mescroll ref and call the beforeRouteLeave method of the child mescroll-vue
      // Record the scrolling position of the list when exiting the route, hide back to the top button and isBounce configuration
      this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
      next();
    },
    beforeDestroy() {
      if (this.mescroll) {
        this.mescroll.destroy();
        this.mescroll = null; }},methods: {
      // A callback initialized by the mescroll component to get the mescroll object
      mescrollInit(mescroll) {
        // If the this.mescroll object is not used, the mescrollInit is not configured
        this.mescroll = mescroll;
      },
      downCallback(mescroll) {
        this.$emit("down-callback", mescroll);
      },
      Page = {num:1, size:10}; Num: current page, starting from 1 by default. Size: number of data items per page. The default value is 10
      upCallback(page, mescroll) {
          // Network request
          axios
            .get("xxxxxx", {
              params: {
                num: page.num, / / page
                size: page.size, // Page length
              },
            })
            .then((response) = > {
              // Request list data
              const arr = response.data;
              // Manually empty the list if it is the first page
              if (page.num === 1) {
                this.dataList = [];
              }
              // Add the requested data to the list
              this.dataList = this.dataList.concat(arr);
              // Hide the state of the pull-down refresh after successful data rendering
              this.$nextTick(() = > {
                mescroll.endSuccess(arr.length);
              });
            })
            .catch((e) = > {
              // Hide the state of pull-down refresh and pull-up load;mescroll.endErr(); }); ,}}};</script>

<style scoped></style>
Copy the code

use

<template>
  <mescroll-component @down-callback="downCallback">
    <list-product :list-data="listData"></list-product>
  </mescroll-component>
</template>

<script>
  import MescrollComponent from "~/components/common/Mescroll";
  import ListProduct from "~/components/product/ListProduct.vue";

  export default {
    components: {
      MescrollComponent,
      ListProduct,
    },
    data() {
      return {
        mescroll: null.listData: [],}; },methods: {
      downCallback(mescroll) {
        this.mescroll = mescroll;
        this.$axios
          .post("xxx")
          .then((res) = > {
            if (res.code === 0) {
              this.listData = res.response;
              this.mescroll.scrollTo(0.0); // Return to the top
              this.$nextTick(() = > {
                this.mescroll.endSuccess();
              });
            } else {
              this.mescroll.endErr();
            }
          })
          .catch((error) = > {
            this.mescroll.endErr(error); }); ,}}};</script>

<style lang="scss" scoped>
  .mescroll {
    height: calc(100% - 1rem);
  }
</style>
Copy the code