mescroll-up.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!-- 上拉加载区域 -->
  2. <template>
  3. <view class="mescroll-upwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
  4. <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
  5. <view v-show="isUpLoading">
  6. <view class="upwarp-progress mescroll-rotate" :style="{'border-color':mOption.textColor}"></view>
  7. <view class="upwarp-tip">{{ mOption.textLoading }}</view>
  8. </view>
  9. <!-- 无数据 -->
  10. <view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. option: Object, // up的配置项
  17. type: Number // 上拉加载的状态:0(loading前),1(loading中),2(没有更多了)
  18. },
  19. computed: {
  20. // 支付宝小程序需写成计算属性,prop定义default仍报错
  21. mOption() {
  22. return this.option || {};
  23. },
  24. // 加载中
  25. isUpLoading() {
  26. return this.type === 1;
  27. },
  28. // 没有更多了
  29. isUpNoMore() {
  30. return this.type === 2;
  31. }
  32. }
  33. };
  34. </script>
  35. <style>
  36. @import './mescroll-up.css';
  37. </style>