vue无线滚动组件封装

<template>
  <div class="scroll-wapper"  :style="{height: scrollHeight + 'px'}" id="scroll-ul">
    <ul  class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
          <slot>
        <div class="tip">
            <div class="logo">
                <img v-if="tip.img" :src="tip.img"/>
                <span v-if="tip.icon" class="iconfont" v-html="tip.icon"></span>
            </div>
            <p>{{tip.title}}</p>
            <button v-if="tip.btn" @click="go">{{tip.btn}}</button>
        </div>
            </slot>
      </ul>
  </div>
</template>

<script>
import { InfiniteScroll, Indicator } from "mint-ui";
import defaultImg from "../../../assets/images/good-tip.png";
 
export default {
  data() {
    return {
      length: true
      // height: {
      //   height: this.scrollHeight
      // }
    };
  },
  mounted() {
    // console.log(this.scrollHeight)
  },
  methods: {
    loadMore() {
      this.loadingHandle();
      this.$emit("loadMore");
    },
    loadingHandle() {
      Indicator.open({
        text: "加载中",
        spinnerType: "fading-circle"
      });
    },
 
  },
  props: {
    loading: {
      type: Boolean,
      default() {
        return false;
      }
    },
    tip: {
      type: Object,
      default() {
        return {
          img: defaultImg,
          title: "暂时没有哦！",
          btn: ""
        };
      }
    },
    scrollHeight: {
      type: Number,
      default() {
        return 200;
      }
    }
  }
};
</script>

外部需传入scrollHeight属性，是该滚动容器的高度，后可以根据实际情况使用