xsx
1 year ago
18 changed files with 513 additions and 284 deletions
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<scroll-view scroll-y="true" upper-threshold="200" @scrolltolower="onScrollToBottom" scroll-with-animation="true"> |
|||
<view v-for="(item, idx) in showItems" :key="idx"> |
|||
<slot :item="item"> |
|||
</slot> |
|||
</view> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "virtual-scroller", |
|||
data() { |
|||
return { |
|||
page: 1, |
|||
isInitEvent: false, |
|||
lockTip: false |
|||
} |
|||
}, |
|||
props: { |
|||
items: { |
|||
type: Array |
|||
}, |
|||
size: { |
|||
type: Number, |
|||
default: 30 |
|||
} |
|||
}, |
|||
methods: { |
|||
onScrollToBottom(e) { |
|||
console.log("onScrollToBottom") |
|||
if (this.showMaxIdx >= this.items.length) { |
|||
this.showTip(); |
|||
} else { |
|||
this.page++; |
|||
} |
|||
}, |
|||
showTip() { |
|||
uni.showToast({ |
|||
title: "已滚动至底部", |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
computed: { |
|||
showMaxIdx() { |
|||
return Math.min(this.page * this.size, this.items.length); |
|||
}, |
|||
showItems() { |
|||
return this.items.slice(0, this.showMaxIdx); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<view> |
|||
<web-view :src="linkUrl"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
linkUrl: '' |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
this.linkUrl = decodeURIComponent(options.url); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<el-scrollbar ref="scrollbar"> |
|||
<div v-for="(item, idx) in items" :key="idx"> |
|||
<slot :item="item" v-if=" idx < showMaxIdx"> |
|||
</slot> |
|||
</div> |
|||
</el-scrollbar> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "virtualScroller", |
|||
data() { |
|||
return { |
|||
page: 1, |
|||
isInitEvent: false, |
|||
lockTip: false |
|||
} |
|||
}, |
|||
props: { |
|||
items: { |
|||
type: Array |
|||
}, |
|||
size: { |
|||
type: Number, |
|||
default: 30 |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.page = 1; |
|||
this.initEvent(); |
|||
}, |
|||
initEvent() { |
|||
if (!this.isInitEvent) { |
|||
let scrollWrap = this.$refs.scrollbar.$el.querySelector('.el-scrollbar__wrap'); |
|||
scrollWrap.addEventListener('scroll', this.onScroll); |
|||
this.isInitEvent = true; |
|||
} |
|||
}, |
|||
onScroll(e) { |
|||
const scrollbar = e.target; |
|||
// 滚到底部 |
|||
if (scrollbar.scrollTop + scrollbar.clientHeight >= scrollbar.scrollHeight - 30) { |
|||
if(this.showMaxIdx >= this.items.length ){ |
|||
this.showTip(); |
|||
}else{ |
|||
this.page++; |
|||
} |
|||
} |
|||
}, |
|||
showTip(){ |
|||
// 提示限制最多3秒显示一次 |
|||
if(!this.lockTip){ |
|||
this.$message.success("已到滚动到底部") |
|||
this.lockTip = true; |
|||
setTimeout(()=>{ |
|||
this.lockTip = false; |
|||
},3000) |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
showMaxIdx() { |
|||
return Math.min(this.page * this.size, this.items.length); |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initEvent(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue