PullToRefresh 拉动刷新 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <pull-to-refresh :indicator="indicator" :direction="direction" :isFinished.sync="isFinished" @onRefresh="refresh">
    <div v-for="(item, index) in Data" :key="index">{{item.text}}</div>
  </pull-to-refresh>
</template>
<script>
export default {
  data() {
    return {
        Data: [],
        isFinished: false,
        direction: ['top', 'bottom'],
        indicator: {
        activate: '松开即可刷新',
        deactivate: '下拉可以刷新',
        release: '加载中...',
        finish: '刷新成功'
        }
    }
  },
  mounted () {
    this.setData()
  },
  methods: {
    setData () {
        this.Data = Array.from(new Array(10)).map((_val, i) => ({text: `${i}`}))
    },
    refresh () {
        setTimeout(() => {
            this.isFinished = true
            this.Data.push({text: 10})
        }, 1500)
    }
  }
}
</script>

<template>
    <pull-to-refresh :direction="direction" type="horizon" :isFinished.sync="isFinished" @onRefresh="refresh">
      <div v-for="(item, index) in Data" :key="index">{{item.text}}</div>
    </pull-to-refresh>
</template>
<script>
export default {
  data() {
    return {
        Data: [],
        isFinished: false,
        direction: ['left', 'right'],
    }
  },
  mounted () {
    this.setData()
  },
  methods: {
    setData () {
        this.Data = Array.from(new Array(10)).map((_val, i) => ({text: `${i}`}))
    },
    refresh () {
        setTimeout(() => {
            this.isFinished = true
            this.Data.push({text: 10})
        }, 1500)
    }
  }
}
</script>