zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
uni_modules/z-paging/components/z-paging/z-paging-refresh.vue Normal file
View File

@@ -0,0 +1,173 @@
<!-- z-paging -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
<!-- 反馈QQ群：790460711 -->
<!-- 下拉刷新view -->
<template>
<view style="height: 100%;">
<view class="zp-custom-refresher-container" style="height: 100%;">
<view class="zp-custom-refresher-left">
<image v-if="refresherStatus!==2" :class="refresherLeftImageClass"
:style="[{'filter' :defaultThemeStyle==='white'?'brightness(10)':''}]" :src="base64Arrow">
</image>
<!-- #ifndef APP-NVUE -->
<image v-else class="zp-loading-more-line-loading-image zp-custom-refresher-left-image" :src="base64Flower">
</image>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-else>
<loading-indicator class="zp-custom-refresher-left-image" :animating="true"></loading-indicator>
</view>
<!-- #endif -->
</view>
<view
:class="defaultThemeStyle==='white'?'zp-custom-refresher-right zp-custom-refresher-right-white':'zp-custom-refresher-right zp-custom-refresher-right-black'">
<text class="zp-custom-refresher-right-text">{{refresherStatusTextMap[refresherStatus]}}
</text>
</view>
</view>
</view>
</template>
<script>
import zStatic from './z-paging-static'
export default {
name: 'z-paging-refresh',
data() {
return {
base64Arrow: zStatic.base64Arrow,
base64Flower: zStatic.base64Flower,
refresherStatusTextMap: {
0: this.refresherDefaultText,
1: this.refresherPullingText,
2: this.refresherRefreshingText
},
refresherLeftImageClass: 'zp-custom-refresher-left-image',
};
},
props: ['refresherStatus', 'defaultThemeStyle', 'refresherDefaultText', 'refresherPullingText',
'refresherPullingText', 'refresherRefreshingText'
],
watch: {
refresherStatus(newVal, oldVal) {
if (newVal === 0 && oldVal !== 0) {
this.refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-down';
}
if (newVal !== 0 && oldVal === 0) {
this.refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-top';
}
}
}
}
</script>
<style scoped>
@import "./z-paging-static.css";
.zp-custom-refresher-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
}
.zp-custom-refresher-left {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.zp-custom-refresher-left-image {
width: 30rpx;
height: 30rpx;
transform: rotate(180deg);
margin-right: 8rpx;
/* #ifdef APP-NVUE */
width: 35rpx;
height: 35rpx;
transition-duration: .2s;
transition-property: transform;
color: #666666;
/* #endif */
}
.zp-custom-refresher-arrow-top {
/* #ifndef APP-NVUE */
animation: refresher-arrow-top 0.25s linear;
-webkitanimation: refresher-arrow-top 0.25s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(0deg);
/* #endif */
}
.zp-custom-refresher-arrow-down {
/* #ifndef APP-NVUE */
animation: refresher-arrow-down 0.25s linear;
-webkit-animation: refresher-arrow-down 0.25s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(180deg);
/* #endif */
}
.zp-custom-refresher-right {
font-size: 26rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.zp-custom-refresher-right-text {
/* #ifdef APP-NVUE */
font-size: 28rpx;
height: 40px;
line-height: 40px;
/* #endif */
color: #555555
}
.zp-custom-refresher-right-black {
color: #666666;
}
.zp-custom-refresher-right-white {
color: #efefef;
}
@keyframes refresher-arrow-top {
0% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes refresher-arrow-down {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
</style>