better-scroll
作者:互联网
<!--html模板-->
<template>
<div class="wrapper" ref="wrapper">
<slot>
<div class="content">
<div class="item" v-for="item in dataList" :key="item">
{{ item }}-内容
</div>
</div>
</slot>
</div>
</template>
<!--js-->
<script> import Bscroll from 'better-scroll' export default { name: 'Scroll', props: { dataList: { type: [Array, Number, String], default: null, }, }, data() { return { scroll: null, } }, created() { this.init() }, methods: { init() { this.$nextTick(() => { this.scroll = new Bscroll(this.$refs.wrapper, { probeType: 3, pullUpLoad: { threshold: 50, }, pullDownRefresh: { threshold: 50, stop: 20, }, }) this.scroll.on('pullingUp', () => { console.log('上拉加载') this.$emit('pullUp', (flag) => { if (flag) { //请求结束后执行刷新操作 this.scroll.refresh() } }) //当刷新时触发 }) this.scroll.on('pullingDown', () => { console.log('下拉刷新') this.$emit('pullDown', (flag) => { if (flag) { this.scroll.refresh() } }) }) }) }, }, } </script> <!--css-->
<style lang="less"> .item { height: 80px; } .wrapper { height: 400px; width: 100vw; overflow: hidden; } </style>
<script> import Bscroll from 'better-scroll' export default { name: 'Scroll', props: { dataList: { type: [Array, Number, String], default: null, }, }, data() { return { scroll: null, } }, created() { this.init() }, methods: { init() { this.$nextTick(() => { this.scroll = new Bscroll(this.$refs.wrapper, { probeType: 3, pullUpLoad: { threshold: 50, }, pullDownRefresh: { threshold: 50, stop: 20, }, }) this.scroll.on('pullingUp', () => { console.log('上拉加载') this.$emit('pullUp', (flag) => { if (flag) { //请求结束后执行刷新操作 this.scroll.refresh() } }) //当刷新时触发 }) this.scroll.on('pullingDown', () => { console.log('下拉刷新') this.$emit('pullDown', (flag) => { if (flag) { this.scroll.refresh() } }) }) }) }, }, } </script> <!--css-->
<style lang="less"> .item { height: 80px; } .wrapper { height: 400px; width: 100vw; overflow: hidden; } </style>
标签:50,better,flag,刷新,threshold,null,scroll 来源: https://www.cnblogs.com/sq652366/p/15710755.html