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属性,是该滚动容器的高度,后可以根据实际情况使用