美文网首页
mint-ui中loadmore使用方法

mint-ui中loadmore使用方法

作者: Vivian_06e6 | 来源:发表于2019-08-06 18:22 被阅读0次

template

<template>
  <div class="wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
    <mt-loadmore 
      :top-method="loadTop" 
      :bottom-method="loadBottom" 
      :bottom-all-loaded="allLoaded" 
      @bottom-status-change="handleBottomChange" 
      ref="loadmore">
      <ul>
        <li v-for="(item,index) in dealerList" v-bind:key="index">
          <div class="body">
            <div class="dealerList">
              <DealerInfo :dealerInfo="item"></DealerInfo>
              <div class="UIactive displayFlex">
                <div class="dealerBtn"><a class="tel" :href="'tel://'+item.tel">立即拨打</a></div>
                <a class="dj" href="##">
                  <div class="dealerBtn dealerBtnActive">获取底价</div>
                </a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>

style

.wrapper{
    overflow-y: scroll;
  }

js

import {Toast,Indicator,InfiniteScroll} from 'mint-ui'
mounted() {
      this.$nextTick(function () {
           this.wrapperHeight = document.documentElement.clientHeight - 
           this.$refs.wrapper.getBoundingClientRect().top;
           console.log(this.wrapperHeight)
      })
      this.getDealerList();
      this.getRelocation();

    },


相关文章

网友评论

      本文标题:mint-ui中loadmore使用方法

      本文链接:https://www.haomeiwen.com/subject/axnwdctx.html