|
|
<template>
|
|
|
<Scroll ref="scroll" class="scroll-view" v-bind="attrMerge" v-on="listenerMerge">
|
|
|
<slot slot="default"></slot>
|
|
|
<template slot="pulldown" slot-scope="props">
|
|
|
<div v-if="props.pullDownRefresh"
|
|
|
class="pulldown-wrapper"
|
|
|
:style="props.pullDownStyle">
|
|
|
<div class="pulldown-content">
|
|
|
<div v-show="props.beforePullDown">
|
|
|
<div id="beforePullDown"></div>
|
|
|
</div>
|
|
|
<div v-show="!props.beforePullDown">
|
|
|
<div id="afterPullDown"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</Scroll>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {Scroll} from 'cube-ui';
|
|
|
|
|
|
export default {
|
|
|
name: 'ScrollView',
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
this._initLottie();
|
|
|
});
|
|
|
},
|
|
|
computed: {
|
|
|
attrMerge() {
|
|
|
return Object.assign({},
|
|
|
{
|
|
|
scrollEvents: ['scroll']
|
|
|
},
|
|
|
this.$attrs,
|
|
|
);
|
|
|
},
|
|
|
listenerMerge() {
|
|
|
return Object.assign({},
|
|
|
this.$listeners,
|
|
|
{
|
|
|
scroll: this.onScroll.bind(this)
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
onScroll(pos) {
|
|
|
if (!this.$refs.scroll.pullDownRefresh) {
|
|
|
return;
|
|
|
}
|
|
|
if (this.$refs.scroll.beforePullDown) {
|
|
|
if (pos.y > 43) {
|
|
|
this.lottieBefore.goToAndStop(Math.abs(pos.y - 43) * 15);
|
|
|
}
|
|
|
} else {
|
|
|
this.lottieBefore.goToAndStop(0);
|
|
|
}
|
|
|
this.$emit('scroll', pos);
|
|
|
},
|
|
|
forceUpdate(dirty) {
|
|
|
this.$refs.scroll.forceUpdate(dirty);
|
|
|
},
|
|
|
_initLottie() {
|
|
|
setTimeout(() => {
|
|
|
import(/* webpackChunkName: "lottie-web" */ 'lottie-web').then(lottie => {
|
|
|
this.lottieBefore = lottie.loadAnimation({
|
|
|
container: document.getElementById('beforePullDown'), // the dom element that will contain the animation
|
|
|
renderer: 'svg',
|
|
|
loop: false,
|
|
|
autoplay: false,
|
|
|
path: 'https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json' // the path to the animation json
|
|
|
});
|
|
|
this.lottieAfter = lottie.loadAnimation({
|
|
|
container: document.getElementById('afterPullDown'), // the dom element that will contain the animation
|
|
|
renderer: 'svg',
|
|
|
loop: true,
|
|
|
autoplay: true,
|
|
|
path: 'https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json' // the path to the animation json
|
|
|
});
|
|
|
});
|
|
|
}, 200);
|
|
|
}
|
|
|
},
|
|
|
components: {Scroll}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.scroll-view {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
overflow: hidden;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.pulldown-wrapper {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
top: -200px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
transition: all;
|
|
|
|
|
|
.pulldown-content {
|
|
|
padding-left: 60px;
|
|
|
padding-right: 60px;
|
|
|
width: 100%;
|
|
|
height: 168px;
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|