zyronon
4 years ago
18 changed files with 1000 additions and 1972 deletions
@ -1,32 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="Test"> |
|
||||||
<SlideRowList> |
|
||||||
<SlideItem style="min-width: 20vw;"> </SlideItem> |
|
||||||
<SlideItem style="min-width: 20vw;"> </SlideItem> |
|
||||||
<SlideItem style="min-width: 25vw;">分段拍</SlideItem> |
|
||||||
<SlideItem style="min-width: 20vw;">快拍</SlideItem> |
|
||||||
<SlideItem style="min-width: 20vw;">影集</SlideItem> |
|
||||||
<SlideItem style="min-width: 20vw;">开直播</SlideItem> |
|
||||||
</SlideRowList> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "Test", |
|
||||||
methods: {} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="less"> |
|
||||||
@import "../../assets/scss/index"; |
|
||||||
|
|
||||||
.Test { |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
top: 0; |
|
||||||
color: white; |
|
||||||
font-size: 2rem; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,191 +0,0 @@ |
|||||||
<template lang="html"> |
|
||||||
<div class="yo-scroll" |
|
||||||
:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" |
|
||||||
@touchstart="touchStart($event)" |
|
||||||
@touchmove="touchMove($event)" |
|
||||||
@touchend="touchEnd($event)" |
|
||||||
@scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined"> |
|
||||||
<section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }"> |
|
||||||
<header class="pull-refresh"> |
|
||||||
<slot name="pull-refresh"> |
|
||||||
<span class="down-tip">下拉更新</span> |
|
||||||
<span class="up-tip">松开更新</span> |
|
||||||
<span class="refresh-tip">更新中</span> |
|
||||||
</slot> |
|
||||||
</header> |
|
||||||
<slot></slot> |
|
||||||
<footer class="load-more"> |
|
||||||
<slot name="load-more"> |
|
||||||
<span>加载中……</span> |
|
||||||
</slot> |
|
||||||
</footer> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
props: { |
|
||||||
offset: { |
|
||||||
type: Number, |
|
||||||
default: 40 |
|
||||||
}, |
|
||||||
enableInfinite: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
enableRefresh: { |
|
||||||
type: Boolean, |
|
||||||
default: true |
|
||||||
}, |
|
||||||
onRefresh: { |
|
||||||
type: Function, |
|
||||||
default: undefined, |
|
||||||
required: false |
|
||||||
}, |
|
||||||
onInfinite: { |
|
||||||
type: Function, |
|
||||||
default: undefined, |
|
||||||
require: false |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
top: 0, |
|
||||||
state: 0, |
|
||||||
startY: 0, |
|
||||||
touching: false, |
|
||||||
infiniteLoading: false |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
touchStart(e) { |
|
||||||
this.startY = e.targetTouches[0].pageY |
|
||||||
this.startScroll = this.$el.scrollTop || 0 |
|
||||||
this.touching = true |
|
||||||
}, |
|
||||||
touchMove(e) { |
|
||||||
if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) { |
|
||||||
return |
|
||||||
} |
|
||||||
let diff = e.targetTouches[0].pageY - this.startY - this.startScroll |
|
||||||
if (diff > 0) e.preventDefault() |
|
||||||
this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) |
|
||||||
|
|
||||||
if (this.state === 2) { // in refreshing |
|
||||||
return |
|
||||||
} |
|
||||||
if (this.top >= this.offset) { |
|
||||||
this.state = 1 |
|
||||||
} else { |
|
||||||
this.state = 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
touchEnd(e) { |
|
||||||
if (!this.enableRefresh) return |
|
||||||
this.touching = false |
|
||||||
if (this.state === 2) { // in refreshing |
|
||||||
this.state = 2 |
|
||||||
this.top = this.offset |
|
||||||
return |
|
||||||
} |
|
||||||
if (this.top >= this.offset) { // do refresh |
|
||||||
this.refresh() |
|
||||||
} else { // cancel refresh |
|
||||||
this.state = 0 |
|
||||||
this.top = 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
refresh() { |
|
||||||
this.state = 2 |
|
||||||
this.top = this.offset |
|
||||||
this.onRefresh(this.refreshDone) |
|
||||||
}, |
|
||||||
refreshDone() { |
|
||||||
this.state = 0 |
|
||||||
this.top = 0 |
|
||||||
}, |
|
||||||
|
|
||||||
infinite() { |
|
||||||
this.infiniteLoading = true |
|
||||||
this.onInfinite(this.infiniteDone) |
|
||||||
}, |
|
||||||
|
|
||||||
infiniteDone() { |
|
||||||
this.infiniteLoading = false |
|
||||||
}, |
|
||||||
|
|
||||||
onScroll(e) { |
|
||||||
if (!this.enableInfinite || this.infiniteLoading) { |
|
||||||
return |
|
||||||
} |
|
||||||
let outerHeight = this.$el.clientHeight |
|
||||||
let innerHeight = this.$el.querySelector('.inner').clientHeight |
|
||||||
let scrollTop = this.$el.scrollTop |
|
||||||
let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0 |
|
||||||
let infiniteHeight = this.$el.querySelector('.load-more').clientHeight |
|
||||||
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight |
|
||||||
if (bottom < infiniteHeight) this.infinite() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style> |
|
||||||
.yo-scroll { |
|
||||||
position: absolute; |
|
||||||
top: 2.5rem; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
overflow: auto; |
|
||||||
-webkit-overflow-scrolling: touch; |
|
||||||
background-color: #ddd |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll .inner { |
|
||||||
position: absolute; |
|
||||||
top: -2rem; |
|
||||||
width: 100%; |
|
||||||
transition-duration: 300ms; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll .pull-refresh { |
|
||||||
position: relative; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
width: 100%; |
|
||||||
height: 2rem; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll.touch .inner { |
|
||||||
transition-duration: 0ms; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll.down .down-tip { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll.up .up-tip { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll.refresh .refresh-tip { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll .down-tip, |
|
||||||
.yo-scroll .refresh-tip, |
|
||||||
.yo-scroll .up-tip { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.yo-scroll .load-more { |
|
||||||
height: 3rem; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue