下拉刷新组件
<p>list-refresh把下拉刷新的各种状态封装起来，使用更简洁。</p>
<p>效果如图：
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/6134897c20fdaf2e9db34a7c70864ef3?showdoc=.jpg" alt="" /></p>
<p>用法如下：</p>
<pre><code class="language-javascript"><list-refresh ref="myRefresh" @refreshEvent="refreshData" @resetLoadmore="resetLoadmore" /></code></pre>
<p>属性：</p>
<ul>
<li>refreshEvent：下拉刷新的事件回调</li>
<li>resetLoadmore: list加载更多有bug，需要在下拉刷新时候，重置加载更多的功能</li>
<li>如下：resetLoadmore() {
if (this.dataList.length > 4) {
this.$refs['viewlist'].resetLoadmore();
}
},</li>
</ul>
<p>方法：</p>
<ul>
<li>在接口返回数据处理的地方，需要手动调用刷新结束方法（为了更新此组件的状态）：
<ul>
<li>refreshEnd() {
if (this.$refs.myRefresh) {
this.$refs.myRefresh.refreshEnd();
}</li>
</ul></li>
</ul>
<p>源码如下：</p>
<pre><code class="language-javascript"><template>
<!-- 下拉刷新 -->
<uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<view class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{ width: refreshing || pulling ? 0 : '32px' }" :class="{ 'refresh-icon-active': refreshFlag }"></image>
<uni-load-refresh v-if="refreshing" class="loading-icon" status="loading"></uni-load-refresh>
<text class="loading-text">{{ refreshText }}</text>
</view>
</uni-refresh>
</template>
<script>
import uniRefresh from '@dcloudio/uni-ui/lib/uni-list/uni-refresh.vue';
import uniLoadRefresh from '@/components/uni-load-refresh.vue';
import i18n from '@/i18n.js';
/** 参数：
* refreshEvent：下拉刷新的事件回调
* resetLoadmore: list加载更多有bug，需要在下拉刷新时候，重置加载更多的功能
* 如下：resetLoadmore() {
if (this.dataList.length > 4) {
this.$refs['viewlist'].resetLoadmore();
}
},
*
* 使用：
* <list-refresh ref="myRefresh" @refreshEvent="refreshData" @resetLoadmore="resetLoadmore"/>
* 在接口返回数据处理的地方，需要手动调用刷新结束方法（为了更新此组件的状态）：
* refreshEnd() {
if (this.$refs.myRefresh) {
this.$refs.myRefresh.refreshEnd();
}
},
*
*/
export default {
components: {
uniRefresh,
uniLoadRefresh
},
created() {
this.pullTimer = null;
this.refreshTimer = null;
},
data() {
return {
pulling: false, // true：表示手势已经放开；false：表示手势正在下拉
refreshing: false, // true：@refresh方法调用后，开始调用刷新接口
refreshFlag: false, // true：箭头向下；false箭头向上
refreshText: '',
refreshIcon:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=='
};
},
methods: {
onrefresh(e) {
this.pulling = true; // 手势完成，隐藏 刷新的箭头
this.refreshing = true; // 显示 loading旋转组件
this.refreshText = this.$getLocale('page_news_refresh_text_refreshing');
this.$emit('refreshEvent');
},
onpullingdown(e) {
this.pulling = false; // 显示 向下、向上的箭头
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
this.refreshFlag = true; // 箭头向上
this.refreshText = this.$getLocale('page_news_refresh_text_now');
} else {
this.refreshFlag = false; // 箭头向下
this.refreshText = this.$getLocale('page_news_refresh_text_dropdown');
}
},
refreshEnd() {
this.refreshFlag = false; // 恢复箭头向下
this.refreshText = this.$getLocale('page_news_refresh_text_refreshed');
if (this.refreshTimer) {
clearTimeout(this.refreshTimer);
}
this.refreshTimer = setTimeout(() => {
this.refreshing = false;
}, 500);
if (this.pullTimer) {
clearTimeout(this.pullTimer);
}
this.pullTimer = setTimeout(() => {
this.pulling = false;
this.$emit("resetLoadmore");
}, 1000);
}
}
};
</script>
<style>
.refresh {
justify-content: center;
}
.refresh-view {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 750rpx;
height: 64px;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.refresh-icon {
width: 32px;
height: 32px;
transition-duration: 0.5s;
transition-property: transform;
transform: rotate(0deg);
transform-origin: 15px 15px;
}
.refresh-icon-active {
transform: rotate(180deg);
}
.loading-icon {
width: 28px;
height: 28px;
margin-right: 5px;
color: gray;
/* background-color: #F0A099; */
}
.loading-text {
margin-left: 2px;
font-size: 16px;
color: #999999;
}
</style>
</code></pre>
<p><strong>用到了两个其他的库，参考审批模块的代码去获取。</strong></p>