移动端 上拉加载
父组件
<template>
<div class=''>
<div class="header"></div>
<scroll :data='data' @scrollToEnd="scrollEndHanlde" :isPullUp='isPulluP' />
</div>
</template>
<script>
import scroll from "./scroll"
import { setTimeout } from 'timers';
//模拟数据
function getOneRandomList(step = 0,local=false) {
const arr = Array.apply(null, {length: (30 + step)}).map((...args) => args[1])
return arr.sort(() => Math.random() - 0.5)
}
export default {
components:{
scroll
},
data() {
return {
data: getOneRandomList(),
pulldown: true,
isPulluP:false
}
},
created() {
},
methods: {
//下拉触发
scrollEndHanlde(){
this.isPulluP=true;
setTimeout(()=>{
const data=getOneRandomList()
this.isPulluP=false;
this.data = this.data.concat(data);
console.log(this.data)
},500)
console.log(this.data)
}
}
}
</script>
<style scoped>
.header{
height: 50px;
background: #ed6;
}
</style>
//子组件
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="(item,key) in data" :key="key">{{item}}</li>
<li>
<div v-show="!isPullUp">更多加载</div>
<div>加载中</div>
</li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from "better-scroll";
export default {
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 1
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的数据
*/
data: {
type: Array,
default: []
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: true
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20
},
isPullUp:{
type:false,
default:Boolean
}
},
mounted() {
// 保证在DOM渲染完毕后初始化better-scroll
setTimeout(() => {
this._initScroll();
}, 20);
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return;
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
mouseWheel: true, //鼠标滚动
// click: true, tap: true,
scrollbar:true,
probeType: this.probeType,
click: this.click,
scrollY:true
});
console.log(this.scroll)
// 是否派发滚动事件
if (this.listenScroll) {
let me = this;
this.scroll.on("scroll", pos => {
me.$emit("scroll", pos);
});
}
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on("scrollEnd", () => {
// 滚动到底部
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
console.log('test')
this.$emit("scrollToEnd");
}
});
}
// 是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on("touchend", pos => {
// 下拉动作
if (pos.y > 50) {
this.$emit("pulldown");
}
});
}
// 是否派发列表滚动开始的事件
if (this.beforeScroll) {
this.scroll.on("beforeScrollStart", () => {
this.$emit("beforeScroll");
});
}
},
disable() {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable();
},
enable() {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable();
},
refresh() {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh();
},
scrollTo() {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
}
},
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.refresh();
}, this.refreshDelay);
}
}
};
</script>
<style scoped>
.wrapper{
overflow: hidden;
position: absolute;
top:50px;
left: 0;
bottom: 0;
right: 0;
}
li{
height: 80px;
line-height: 80px;
background: #eee;
}
</style>
