<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>