<!-- 下拉刷新区域 -->
|
<template>
|
<view v-if="mOption.use" class="mescroll-downwarp" :style="{'background':mOption.bgColor,'color':mOption.textColor}">
|
<view class="downwarp-content">
|
<view v-if="isDownLoading" class="downwarp-progress"></view>
|
<view v-else class="downwarp-arrow" :style="{ transform: downRotate }"></view>
|
<view class="downwarp-tip">{{ downText }}</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
option: Object, // down的配置项
|
type: Number // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
},
|
computed: {
|
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
mOption() {
|
return this.option || {};
|
},
|
// 是否在加载中
|
isDownLoading() {
|
return this.type === 3;
|
},
|
// 旋转的角度
|
downRotate() {
|
return this.type === 2 ? 'rotate(-180deg)' : 'rotate(0deg)';
|
},
|
// 文本提示
|
downText() {
|
switch (this.type) {
|
case 1:
|
return this.mOption.textInOffset;
|
case 2:
|
return this.mOption.textOutOffset;
|
case 3:
|
return this.mOption.textLoading;
|
case 4:
|
return this.mOption.textLoading;
|
default:
|
return this.mOption.textInOffset;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
@import '../../../mescroll-uni/components/mescroll-down.css';
|
@import './mescroll-down.css';
|
</style>
|
