custom-refresher.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="refresher-container">
  3. <!-- 这里的图片请换成自己项目的图片 -->
  4. <image class="refresher-image" mode="aspectFit" src="./refresher_loading.gif"></image>
  5. <text class="refresher-text">{{statusText}}</text>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. };
  13. },
  14. computed: {
  15. statusText() {
  16. // 这里可以做i18n国际化相关操作,可以通过zI18n.getLanguag()获取当前语言(需要import z-paging-i18n.js,具体操作见i18n-demo.vue);
  17. // 获取到当前语言之后,就可以自定义不同语言下的展示内容了
  18. const statusTextArr = ['哎呀,用点力继续下拉!', '拉疼我啦,松手刷新~~', '正在努力刷新中...'];
  19. return statusTextArr[this.status];
  20. }
  21. },
  22. props: {
  23. status: {
  24. type: Number,
  25. default: function() {
  26. return 0;
  27. },
  28. },
  29. }
  30. }
  31. </script>
  32. <style scoped>
  33. .refresher-container {
  34. /* #ifndef APP-NVUE */
  35. height: 100%;
  36. display: flex;
  37. /* #endif */
  38. /* #ifdef APP-NVUE */
  39. height: 150rpx;
  40. /* #endif */
  41. flex-direction: column;
  42. align-items: center;
  43. justify-content: center;
  44. }
  45. .refresher-image {
  46. margin-top: 10rpx;
  47. height: 45px;
  48. width: 45px;
  49. }
  50. .refresher-text {
  51. margin-top: 10rpx;
  52. font-size: 24rpx;
  53. color: #666666;
  54. }
  55. </style>