mescroll-up.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!-- 上拉加载区域 -->
  2. <template>
  3. <view class="mescroll-upwarp" :style="{'background':mOption.bgColor,'color':mOption.textColor}">
  4. <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
  5. <view v-show="isUpLoading">
  6. <view class="upwarp-progress mescroll-rotate"></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(没有更多了,显示END文本提示),3(没有更多了,不显示END文本提示)
  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-uni/components/mescroll-up.css';
  37. @import './mescroll-up.css';
  38. </style>