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>