# scroll-view
源代码
<template>
<div class="scroll-view" :style="{ height: wh + 'px' }">
<fine-scroll
@load="load"
@refreshFn="refreshFn"
:refresh="refresh"
:pulling.sync="pulling"
:loading.sync="loading"
>
<template #header>
<div class="scroll-top-container">VUE</div>
</template>
<ul class="list">
<li v-for="val in list" :key="val">
{{ val }}
</li>
</ul>
<p class="loading-text">{{ loadtext }}</p>
</fine-scroll>
</div>
</template>
<script>
const createData = (length = 10) => {
return new Array(length).fill(1).map((_) => Math.random())
}
export default {
components: {},
data() {
return {
loadtext: '加载更多',
refresh: true, //是否支持下拉刷新
loading: false, //是否正在加载中
pulling: false, //是否正在刷新
wh: window.innerHeight,
list: createData(50)
}
},
methods: {
load() {
console.log('到底了')
this.loadtext = '加载中...'
setTimeout(() => {
this.list.push(...createData(10))
this.loading = false
}, 1000)
},
refreshFn() {
console.log('触发下拉刷新')
setTimeout(() => {
this.pulling = false
this.list.sort((a, b) => Math.random() - 0.5)
}, 1000)
}
}
}
</script>
<style lang="less">
.scroll-view {
> div {
height: 100%;
}
.scroll-top-container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: #35495e;
color: #fff;
font-size: 50px;
}
.loading-text {
line-height: 24px;
color: #ccc;
font-size: 12px;
text-align: center;
}
}
.list li {
list-style: none;
padding: 5px 20px;
line-height: 20px;
text-align: left;
font-size: 14px;
color: #fff;
background-color: #35495e;
border-top: 1px solid #fff;
}
</style>
← swiper