soc_app/src/components/scroll/scroll.vue

<template>
  <div ref="wrapper" class="better-scroll">
    <div class="content">
      <div v-if="pulldown" class="pulldown-tip">
        <span>{{pulldownTip.text}}</span>
      </div>
      <div class="list">
        <slot></slot>
      </div>
      <div v-if="pullupShow" class="pullup-tip">
        <span>{{pullupTip.text}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
      name: "scroll",
      props: {
        // 滚动的时候会触发scroll事件，会截流
        // 滚动的时候实时触发scroll事件，不会截流
        // 在swipe的情况下也能使用scroll事件
        probeType: {
          type: Number,
          default: 3
        },
        //点击列表触发click事件
        click: {
          type: Boolean,
          default: true
        },
         //开启横向滚动
        scrollX: {
          type: Boolean,
          default: false
        },
        //滚动事件
        listenScroll: {
          type: Boolean,
          default: false
        },
        //列表数据
        data: {
          type: Array,
          default: null,
        },
        //滚动到底部事件，用于上拉加载
        pullup: {
          type: Boolean,
          default: true
        },
        //顶部下拉事件，用于下拉刷新
        pulldown: {
          type: Boolean,
          default: true
        },
        //列表滚动事件
        beforeScroll: {
          type: Boolean,
          default: false
        },
        //刷新scroll延时。
        refreshDelay: {
          type: Number,
          default: 20
        },
      },
      data(){
        return{
          loadingConnecting: false,
          pullupShow:false,
          pulldownTip: {
            text: '下拉刷新',
          },
          pullupTip: {
            text: '上拉加载',
          },
        }
      },
      mounted() {
          this.initScroll();
      },
      watch: {
        pullup(v){
          console.log(v,'监听pullup事件')
          //this.pullup = v;
        },
        data(v) {
          setTimeout(() => {
            this.refresh()
          }, this.refreshDelay)
        }
      },
      methods: {
        initScroll() {
          if (!this.$refs.wrapper) {
            return;
          }
          // better-scroll的初始化
          this.scroll = new BScroll(this.$refs.wrapper, {
            probeType: this.probeType,
            click: this.click,
            scrollX: this.scrollX
          });

          // 是否触发滚动事件
          if (this.listenScroll || this.pulldown || this.pullup) {
            //监听滚动事件
            this.scroll.on('scroll', (pos) => {
              if (this.listenScroll) {
                this.$emit('scroll', pos);
              }
              // 下拉刷新
              if (this.pulldown) {
                if (pos.y > 50) {
                  this.pulldownTip = {
                    text: '松开立即刷新',
                  }
                } else {
                  this.pulldownTip = {
                    text: '下拉刷新',
                  }
                }
              }

              //上拉加载
              if (this.pullup) {
                if (pos.y < (this.scroll.maxScrollY + -50)) {
                  this.pullupTip = {
                    text: '加载中..',
                  };
                }else {
                  this.pullupTip = {
                    text: '上拉加载',
                  };
                }
                this.pullupShow = true;
              }

            })
          }
          console.log(this.pullup,'pullup')
          // 底部上拉事件，上拉加载
          if (this.pullup) {
            this.scroll.on('touchEnd', (pos) => {

              // 下拉动作
              if (pos.y < -40) {
                // this.pullupTip = {
                //   text: '111',     // 松开立即刷新
                // };
                console.log('上拉加载,touchEnd')
                this.$emit('pullup');
              }
            });
          }

          //顶部下拉事件，下拉刷新
          if (this.pulldown) {
            this.scroll.on('touchEnd', (pos) => {
              // 下拉动作
              if (pos.y > 50) {
                // 重置提示信息
                // this.pulldownTip = {
                //   text: '222',     // 松开立即刷新
                // };
                console.log('下拉刷新,touchEnd')
                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);
        }
      },
    }
</script>
<style lang="scss">
  .better-scroll{
    height: 100%;
    position: relative;
    overflow: hidden;
    .content {
      min-height: calc(100% + 1px);
      border-top: 1px solid #f2f2f2;
      overflow: auto;
    }
    .list{
      overflow: auto;
    }
    .pulldown-tip {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -80px;
      height: 80px;
      line-height: 80px;
      color: #bbb;
      font-size: 3.5vw;
      z-index: 1;
    }
    .pullup-tip{
      box-sizing: border-box;
      line-height: 80px;
      width: 100%;
      color: #bbb;
      font-size: 3.5vw;
      text-align: center;
      margin: 0 auto;
    }

  }
</style>