loadmore.nvue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u-loadmore
  7. status="loading"
  8. :isDot="true"
  9. :iconSize="17"
  10. ></u-loadmore>
  11. </view>
  12. </view>
  13. <view class="u-demo-block">
  14. <text class="u-demo-block__title">无更多数据</text>
  15. <view class="u-demo-block__content">
  16. <u-loadmore
  17. :line="true"
  18. status="nomore"
  19. ></u-loadmore>
  20. </view>
  21. </view>
  22. <view class="u-demo-block">
  23. <text class="u-demo-block__title">加载更多(点击触发事件)</text>
  24. <view class="u-demo-block__content">
  25. <u-loadmore
  26. :line="true"
  27. status="loadmore"
  28. @loadmore="loadmore"
  29. ></u-loadmore>
  30. </view>
  31. </view>
  32. <view class="u-demo-block">
  33. <text class="u-demo-block__title">自定义图标</text>
  34. <view class="u-demo-block__content">
  35. <u-loadmore
  36. status="loading"
  37. loadingIcon="circle"
  38. ></u-loadmore>
  39. </view>
  40. </view>
  41. <view class="u-demo-block">
  42. <text class="u-demo-block__title">显示点</text>
  43. <view class="u-demo-block__content">
  44. <u-loadmore
  45. status="nomore"
  46. :isDot="true"
  47. :line="true"
  48. color="#909399"
  49. ></u-loadmore>
  50. </view>
  51. </view>
  52. <view class="u-demo-block">
  53. <text class="u-demo-block__title">自定义提示语</text>
  54. <view class="u-demo-block__content">
  55. <u-loadmore
  56. status="loading"
  57. loadingText="努力加载中,先喝杯茶"
  58. color="#909399"
  59. ></u-loadmore>
  60. </view>
  61. </view>
  62. <view class="u-demo-block">
  63. <text class="u-demo-block__title">自定义线条颜色</text>
  64. <view class="u-demo-block__content">
  65. <u-loadmore
  66. loadmoreText="看,我和别人不一样"
  67. color="#1CD29B"
  68. lineColor="#1CD29B"
  69. dashed
  70. :line="true"
  71. ></u-loadmore>
  72. </view>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. export default {
  78. data() {
  79. return {
  80. }
  81. },
  82. methods: {
  83. loadmore() {
  84. console.log('loadmore');
  85. uni.$u.toast('加载更多')
  86. }
  87. },
  88. }
  89. </script>
  90. <style lang="scss">
  91. </style>