如何使用Vue实现下拉刷新功能

npm install better-scroll axios --save

<script>import BScroll from 'better-scroll';import axios from 'axios';export default {  name: 'Refresh',  data() {    return {      listData: [],      bs: null    };  },  mounted() {    this.getListData();    // 在mounted生命周期函数中初始化better-scroll插件    this.bs = new BScroll(this.$refs.wrapper, {      click: true,      pullDownRefresh: true    });    // 监听下拉刷新事件    this.bs.on('pullingDown', () => {      // 根据需求实现相应操作      this.getListData();      // 数据加载完成后需要结束下拉刷新操作      this.bs.finishPullDown();      // 重新计算better-scroll插件的高度      this.bs.refresh();    });  },  methods: {    getListData() {      axios.get('xxxx').then(response => {        this.listData = response.data;      });    }  }};</script>

<template>  <div class="refresh-wrapper" ref="wrapper">    <div class="refresh-content">      <ul>        <li v-for="(item, index) in listData" :key="index">{{ item }}</li>      </ul>    </div>  </div></template>

<style scoped>.refresh-wrapper {  height: 100%;  overflow: hidden;  position: relative;}.refresh-content {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  overflow-y: auto;  -webkit-overflow-scrolling: touch;}</style>