美文网首页
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