Introduction

When developing the H5 project on the mobile phone, I chose the vue + vant ecosystem, and when using PullRefresh pull down refresh component, you need to customize the display. However, there are 3 pages under the home page Tab that need to be customized, and they are encapsulated as a component for convenience.

source code

The following is the relevant source code of pullRefresh.vue and parent.vue

1. Subcomponent pullRefresh.vue

<template>
  <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
    <!-- drop down prompt, via scale Implement a zoom effect -->
    <template #pulling="props">
      <img
        class="doge"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- release hint -->
    <template #loosing>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
    </template>

    <!-- loading prompt -->
    <template #loading>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
    </template>
    <slot></slot>
  </van-pull-refresh>
</template>
<script>
export default {
  name: 'pull-refresh',
  props: {
    value: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    return {
      isLoading: false,
    }
  },
  watch: {
    value(val) {
      // 3.1 After listening to the value change to true, the val at this time is true
      // 7. Listen to the change of the parent component isLoading value, this is the val is false
      if (val == false) {
        // 8. Since val == false, the isLoading of the subcomponent is set to false at this time, and the pull-down refresh process is completed.
        this.isLoading = false
      }
    }
  },
  methods: {
    // 1. The child component triggers the onRefresh event for the first time
    onRefresh () {
      // 2. Update the value of the parent component's value, where the value is isLoading in the parent component
      this.$emit('input', true)
      // 4. Trigger the refresh event of the parent component, which is the onRefresh event in the parent component
      this.$emit('refresh')
    },
  }
}
</script>
<style>
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
</style>

2. Parent component parent.vue

<tempalte>
  <pull-refresh v-model="isLoading" @refresh="onRefresh">
  parent component information
  </pull-refresh>
</template>
<script>
import pullRefresh from './pullRefresh.vue'
export default {
  components: {
    'pull-refresh': pullRefresh
  },
  data () {
    return {
      // 3.2 isLoading = true due to the input event generated in the child component
      isLoading: false,
    }
  },
  methods: {
    // 5. The child component triggers the onRefresh method in the parent component
    onRefresh () {
      setTimeout(()=>{

        // 6. When the pull-down refresh is completed, update the isLoading of the parent component to false, which triggers the change of the value in the child component
        this.isLoading: false
      }, 2000)
    }
  }
}
</script>

Source code analysis

Relevant knowledge points used:

1. slot
2. Computed and listening properties
3. custom event
4. v-model for custom components

Process analysis

Simulate a pull-to-refresh on the page

1. Child component fires onRefresh event for the first time
2. Update the value of the value of the parent component, where the value is isLoading in the parent component
3. This will trigger two changes
   3.1 After listening to the value change to true, the val at this time is true
   3.2 isLoading = true due to the input event generated in the child component
4. Trigger the refresh event of the parent component, which is the onRefresh event in the parent component
5. The child component triggers the onRefresh method in the parent component
6. When the pull-down refresh is completed, the isLoading of the updated parent component is false, and the value of the value in the child component is triggered to change.
7. Listen to the change of the isLoading value of the parent component, this is the val of false
8. Since val == false, the isLoading of the subcomponent is set to false at this time, and the pull-down refresh process is completed.

Summarize

In the project, you still need to read, write and summarize more, so as to better understand Vue