index.vue 943 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <demo-section name="pull-refresh">
  3. <van-pull-refresh
  4. v-model="isLoading"
  5. @refresh="onRefresh"
  6. >
  7. <demo-block :title="$t('basicUsage')">
  8. <p>{{ $t('text') }}: {{ count }}</p>
  9. </demo-block>
  10. </van-pull-refresh>
  11. </demo-section>
  12. </template>
  13. <script>
  14. export default {
  15. i18n: {
  16. 'zh-CN': {
  17. text: '刷新次数',
  18. success: '刷新成功'
  19. },
  20. 'en-US': {
  21. text: 'Refresh Count',
  22. success: 'Refresh success'
  23. }
  24. },
  25. data() {
  26. return {
  27. count: 0,
  28. isLoading: false
  29. };
  30. },
  31. methods: {
  32. onRefresh() {
  33. setTimeout(() => {
  34. this.$toast(this.$t('success'));
  35. this.isLoading = false;
  36. this.count++;
  37. }, 500);
  38. }
  39. }
  40. };
  41. </script>
  42. <style lang="less">
  43. .demo-pull-refresh {
  44. .van-pull-refresh {
  45. &,
  46. &__track {
  47. height: calc(100vh - 50px);
  48. }
  49. }
  50. p {
  51. margin: 10px 0 0 15px;
  52. }
  53. }
  54. </style>