上拉加载
image.png
image.png
下拉刷新
image.png
image.png
组件代码：
<template>
<div class="pullto" :style="'height:'+bodyheight+'px'">
<!--上拉-->
<div v-if="statement==1">
<pull-to class="pullbock"
:is-bottom-bounce="true"
:style="'height:'+bodyheight+'px'"
:bottom-load-method="refresh"
@bottom-state-change="change"
@bottom-pull="bottompull">
<slot name="listblock"></slot>
<div class="extra"></div>
<div class="topblock" slot="bottom-block">
<div class="icondiv">
<div :class="type=='pull'?'iconfont icon-down1 iconspan':
(type=='loading'?'iconfont icon-loading iconspan rotate':
(type=='loading-fail'?'iconfont icon-erroring iconspan':
(type=='loading-done'?'iconfont iconspan':'')))"></div>
</div>
<span>{{state}}</span>
</div>
</pull-to>
</div>
<!--下拉-->
<div v-if="statement==2">
<pull-to class="pullbock"
:is-top-bounce="true"
:style="'height:'+bodyheight+'px'"
:top-load-method="refreshtop"
@top-state-change="changetop"
@top-pull="toppull">
<slot name="listblock2"></slot>
<div class="extra"></div>
<div class="topblock" slot="top-block">
<div class="icondiv">
<div :class="toptype=='pull'?'iconfont icon-fangxiangjiantou-copy-copy-copy iconspan':
(toptype=='loading'?'iconfont icon-loading iconspan rotate':
(toptype=='loading-fail'?'iconfont icon-erroring iconspan':''))"></div>
</div>
<span>{{topstate}}</span>
</div>
</pull-to>
</div>
<!--上拉+下拉-->
<div v-if="statement==3">
<div class="opacityZati"
style="height:100vh;width:100%;opacity:0;z-index:1000;position:fixed;top:0;left:0; background:red"
v-if="isBlock"></div>
<pull-to class="pullbock"
:is-bottom-bounce="true"
:is-top-bounce="true"
:style="'height:'+bodyheight+'px'"
:bottom-load-method="refresh"
:top-load-method="refreshtop"
@bottom-state-change="change"
@top-state-change="changetop"
@bottom-pull="bottompull"
@top-pull="toppull">
<slot name="listblock3"></slot>
<div class="extra"></div>
<div class="topblock" slot="bottom-block">
<!--icon-success-->
<div class="icondiv">
<div :class="type=='pull'?'iconfont icon-down1 iconspan':
(type=='loading'?'iconfont icon-loading iconspan rotate':
(type=='loading-fail'?'iconfont icon-erroring iconspan':
(type=='loading-done'?'iconfont iconspan':'')))"></div>
</div>
<span>{{state}}</span>
</div>
<div class="topblock" slot="top-block">
<div class="icondiv">
<div :class="toptype=='pull'?'iconfont icon-fangxiangjiantou-copy-copy-copy iconspan':
(toptype=='loading'?'iconfont icon-loading iconspan rotate':
(toptype=='loading-fail'?'iconfont icon-erroring iconspan':
(toptype=='loading-done'?'iconfont icon-success iconspan':'')))"></div>
</div>
<span>{{topstate}}</span>
</div>
</pull-to>
</div>
<!--无-->
<div v-if="statement==4">
<pull-to class="pullbock"
:is-top-bounce="false"
:style="'height:'+bodyheight+'px'"
:top-load-method="refreshtop"
@top-state-change="changetop"
@top-pull="toppull">
<slot name="listblock4"></slot>
<div class="extra"></div>
</pull-to>
</div>
</div>
</template>
<script>
import PullTo from 'vue-pull-to';
export default {
name: 'example',
data() {
return {
dataList: [1, 2, 3, 4, 5, 6, 7, 8],
topConfig: {
pullText: '上拉加载更多数据', // 下拉时显示的文字
triggerText: '释放更新', // 下拉到触发距离时显示的文字
loadingText: '加载中', // 加载中的文字
doneText: '加载完成', // 加载完成的文字
failText: '加载失败', // 加载失败的文字
loadedStayTime: 400, // 加载完后停留的时间ms
stayDistance: 250, // 触发刷新后停留的距离
triggerDistance: 70 // 下拉刷新触发的距离
},
state: '上拉加载更多数据',
typing: 'pull',
topstate: '下拉刷新数据',
statement: 1,
className1: '',
className2: '',
isBlock: false,
}
},
props: {
type: String,
toptype: String,
bodyheight: Number,
stating: Number, //1.默认只有下拉，2.默认只有上拉，3.上拉下拉都有
},
components: {
PullTo
},
methods: {
refresh(loaded) {
let _this = this;
let timer = setTimeout(() => {
_this.$emit('nextpage');
loaded(_this.type);
clearTimeout(timer);
}, 1000);
},
refreshtop(loaded) {
let _this = this;
_this.isBlock = true;
_this.$emit('refresh');
let timer = setTimeout(() => {
loaded(_this.toptype);
_this.isBlock = false;
clearTimeout(timer);
}, 1000);
},
change(value) { //pull,trigger,loading,loaded-done
// console.log('======change value=======>',value)
},
changetop(value) { //pull,trigger,loading,loaded-done
console.log('======change top=======>', value)
},
toppull(value) {
},
bottompull(value) {
},
typetoState() {
let _this = this;
if (_this.type == 'pull') {
_this.state = '上拉加载更多数据';
}
else if (_this.type == 'trigger') {
_this.state = '释放加载更多数据';
}
else if (_this.type == 'loading') {
_this.state = '加载中...';
}
else if (_this.type == 'loading-done') {
_this.state = '已经到底了';
}
else if (_this.type == 'loading-fail') {
_this.state = '加载失败';
}
else {
console.log('上拉的其他情况');
}
},
toptoState() {
let _this = this;
if (_this.toptype == 'pull') {
_this.topstate = '下拉刷新数据';
}
else if (_this.toptype == 'trigger') {
_this.topstate = '释放刷新数据';
}
else if (_this.toptype == 'loading') {
_this.topstate = '刷新中...';
}
else if (_this.toptype == 'loading-done') {
_this.topstate = '刷新成功';
}
else if (_this.toptype == 'loading-fail') {
_this.topstate = '刷新失败';
}
else {
console.log('下拉的其他情况');
}
},
},
watch: {
type(val, oldval) {
this.typetoState();
},
toptype(val, oldval) {
this.toptoState();
},
stating(val, oldval) {
this.statement = this.stating;
console.log('---------------------stating------------------>', this.stating);
}
},
mounted() {
this.typetoState();
this.toptoState();
if (this.stating) {
this.statement = this.stating;
}
}
}
</script>
<style lang="less" scoped>
@import './style.css';
</style>
网友评论