h5-colexiu/src/components/the-full-refresh/index.tsx

import { Image, PullRefresh } from 'vant';
import { defineComponent, reactive, watch } from 'vue';
import styles from './index.module.less';
import { Vue3Lottie } from 'vue3-lottie';
import AstronautJSON from './datas/data.json';
import 'vue3-lottie/dist/style.css';
import loading from './loading.gif';
import loadingJSon from './loading.json';
export default defineComponent({
  name: 'm-full-refresh',
  props: {
    title: String,
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['refresh', 'update:modelValue'],
  setup(props, { emit, slots }) {
    const state = reactive({
      fullState: false
    });
    watch(
      () => props.modelValue,
      (val: boolean) => {
        state.fullState = val;
      }
    );
    watch(
      () => state.fullState,
      (val: boolean) => {
        emit('update:modelValue', val);
      }
    );
    return () => (
      <PullRefresh
        v-model:modelValue={state.fullState}
        onRefresh={() => emit('refresh')}
        loadingText=" "
        class={styles.pullRefresh}>
        {{
          // loading: () => (
          //   <div>
          //     {
          //       // <Image src={loadingJSon.loading} class={styles.loading} />
          //       <Vue3Lottie
          //         class={styles.animateWrap}
          //         animationData={AstronautJSON}></Vue3Lottie>
          //     }
          //   </div>
          // ),
          // pulling: () => (
          //   <div>
          //     {
          //       // <Image src={loading} class={styles.loading} />
          //       <Vue3Lottie
          //         class={styles.animateWrap}
          //         animationData={AstronautJSON}></Vue3Lottie>
          //     }
          //   </div>
          // ),
          // loosing: () => (
          //   <div>
          //     {
          //       // <Image src={loading} class={styles.loading} />
          //       <Vue3Lottie
          //         class={styles.animateWrap}
          //         animationData={AstronautJSON}></Vue3Lottie>
          //     }
          //   </div>
          // ),
          default: () => <> {slots.default && slots.default()}</>
        }}
      </PullRefresh>
    );
  }
});