mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-11 12:49:30 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="tm-pullBottom">
|
||||
<scroll-view
|
||||
class="tm-pullBottom-sroll"
|
||||
:refresher-enabled="disabled"
|
||||
:refresher-threshold="pullY"
|
||||
:refresher-triggered="isRefresh"
|
||||
:scroll-y="true"
|
||||
refresher-default-style="none"
|
||||
:lower-threshold="bottomY"
|
||||
@scrolltolower="pullBottom"
|
||||
@refresherpulling="onPulling"
|
||||
@refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore"
|
||||
@refresherabort="onAbort"
|
||||
:style="{
|
||||
height:activeHeight+'px'
|
||||
}">
|
||||
<view v-if="bottomLoadding==true" class="tm-pullBottom-top flex-center flex-col">
|
||||
<view v-if="loading">
|
||||
|
||||
<view>
|
||||
<slot name="pull" v-if="isPullDown==true&&showScrollPic">
|
||||
<view class="tm-pullBottom-top-icon flex-center pull"
|
||||
>
|
||||
<tm-icons :color="color" name="icon-long-arrow-up"></tm-icons>
|
||||
</view>
|
||||
<view class="flex-center tm-pullBottom-top-text text-size-n"
|
||||
:class="[`text-${color}`]">继续下拉刷新</view>
|
||||
</slot>
|
||||
<slot name="pullReresh" v-if="isPullDown==false&&showScrollPic">
|
||||
<view class="tm-pullBottom-top-icon flex-center "
|
||||
>
|
||||
<tm-icons :color="color" name="icon-long-arrow-up"></tm-icons>
|
||||
</view>
|
||||
<view class="flex-center tm-pullBottom-top-text text-size-n"
|
||||
:class="[`text-${color}`]" >松开刷新</view>
|
||||
</slot>
|
||||
</view>
|
||||
<tm-loadding v-if="showScrollPic==false" ></tm-loadding>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="default"></slot>
|
||||
<tm-loadding v-if="bottomLoadding==false&&loading" ></tm-loadding>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 上拉触底刷新
|
||||
* @property {String|Number} height = [] 默认0，默认0使用父高度。
|
||||
* @property {Number} pullY = [] 默认80，下拉多长的距离执行刷新。
|
||||
* @property {Number} bottomY = [] 默认0，离底部多高度多少执行加载
|
||||
* @property {String} color = [] 默认primary，主题色。
|
||||
* @property {Boolean} loading = [] 默认 false，，需要loading.sync执行双向绑定，加载状态，true，加载中。false加载完成。
|
||||
* @property {Boolean} disabled = [] 默认 true，，是否启用下拉刷新，不影响触底刷新功能。
|
||||
* @property {Boolean} finish = [] 默认 false，是否数据没有了。如果为true，触底后将不会触发刷新操作。
|
||||
* @property {Function} refresh 当下拉或者触底时，触发此函数。参数e=pull为下拉刷新，bottom为触底刷新。
|
||||
* @example <tm-pullBottom :loading.sync="loading" @refresh="getdata"></tm-pullBottom>
|
||||
*/
|
||||
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
|
||||
import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
|
||||
|
||||
export default {
|
||||
components:{tmIcons,tmLoadding},
|
||||
name:"tm-pullBottom",
|
||||
props:{
|
||||
// 高度，默认为0时，自动使用父组件的高度.
|
||||
height: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
},
|
||||
pullY:{
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
bottomY:{
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
loading:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 是否没有更多数据了。
|
||||
finish:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
disabled:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
}
|
||||
|
||||
},
|
||||
watch:{
|
||||
loading:function(newval){
|
||||
|
||||
if(newval==false){
|
||||
// 结束操作。
|
||||
this.susscess();
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeHeight: 0,
|
||||
isRefresh:false,//是否触发了下拉刷新区域。
|
||||
freshing:false,//是否刷新 中。
|
||||
showScrollPic:false,//是否拖动了下拉区域，显示图标。停止不显示。
|
||||
isPullDown:false,//是否下正确的下拉刷新区域。
|
||||
bottomLoadding:true,//当前是底部还是顶部刷新操作。false为底部。true为顶部。
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.guid = uni.$tm.guid();
|
||||
let t = this;
|
||||
this.$nextTick(async function() {
|
||||
this.activeHeight = uni.upx2px(this.height);
|
||||
if (!this.activeHeight) {
|
||||
let wsz = await this.$Querey(".tm-pullBottom",this).catch(e=>{})
|
||||
this.activeHeight = wsz[0].height||150;
|
||||
}
|
||||
if(this.loading===true){
|
||||
this.$emit('update:loading',false)
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onRefresh(e) {
|
||||
let t = this;
|
||||
this.isRefresh = true;
|
||||
setTimeout(function() {
|
||||
t.isRefresh = false;
|
||||
t.showScrollPic = false;
|
||||
if(t.freshing==true) return;
|
||||
t.freshing = true;
|
||||
t.pullChangeOk();
|
||||
}, 200);
|
||||
|
||||
},
|
||||
onPulling(e){
|
||||
|
||||
if(this.loading === false){
|
||||
|
||||
this.$emit('update:loading',true)
|
||||
}
|
||||
this.bottomLoadding = true;
|
||||
this.showScrollPic = true;//显示刷新 图标。
|
||||
let dy = e.target.dy || 0
|
||||
// #ifdef H5
|
||||
dy = e.target.deltaY;
|
||||
// #endif
|
||||
|
||||
if(dy < this. pullY){
|
||||
this.isPullDown = true;
|
||||
}else{
|
||||
this.isPullDown = false;
|
||||
}
|
||||
},
|
||||
onAbort(e){
|
||||
this.$emit('update:loading',false)
|
||||
this.showScrollPic = false;//显示刷新 图标。
|
||||
|
||||
},
|
||||
onRestore(e){
|
||||
this.isRefresh = 'restore'; // 需要重置
|
||||
|
||||
},
|
||||
// 结束操作。
|
||||
susscess(){
|
||||
this.freshing = false;
|
||||
this.$emit('update:loading',false)
|
||||
|
||||
},
|
||||
pullChangeOk(){
|
||||
|
||||
this.$emit("refresh",'pull')
|
||||
},
|
||||
// 触底加载中。
|
||||
pullBottom(){
|
||||
if(this.finish) return;
|
||||
this.bottomLoadding = false;
|
||||
if(this.loading === false){
|
||||
this.$emit('update:loading',true)
|
||||
this.$emit("refresh",'bottom')
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-pullBottom{
|
||||
height: 100%;
|
||||
.tm-pullBottom-sroll{
|
||||
position: relative;
|
||||
.tm-pullBottom-top{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.tm-pullBottom-top-icon{
|
||||
transition: all 0.5s;
|
||||
&.pull{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user