mint ui 中 使用loadmore加载更多组件 autoFill 撑满容器的属性没有用?

前端技术小哥
  • 689

mint ui 中 使用loadmore加载更多组件 autoFill 撑满容器的属性没有用?

代码:

<div class="container"
     :style="{
     '-webkit-overflow-scrolling': scrollMode,
     'height': containerHeight,
     'overflow': 'scroll'
     }"
>
  <mt-loadmore
    :top-method="loadTop"
    :bottom-method="loadBottom"
    :bottom-all-loaded="allLoaded"
    :autoFill = "true"
    ref="loadmore">
    <ul>
      <li v-for="item in result_data" @click="toDetail(item)">
        <div class="cc">
          <img :src="item.routeThumb" alt="">
          <div class="content">
            <h1>{{item.routeName}}</h1>
            <star-groups
              :star_data="item.star"
            ></star-groups>
            <label for="">{{item.typeName}}</label>
            <div class="price">
              <span>¥</span>{{item.routePrice}}起
            </div>
          </div>
        </div>
      </li>
    </ul>
  </mt-loadmore>
</div>
js代码
export default {
data() {
  return {
    tabData: [
      {
        label: '推荐顺序',
        value: 1
      },
      {
        label: '全部类型',
        value: 2,
      },
      {
        label: '区域筛选',
        value: 3,
      }
    ],
    result_data: [],
    search_data: {
      //navId:6,
      start: 0,
      limit: 5,
      cityId: 179
    },
    query_data: {},//筛选条件
    types: [], //类别
    regions: [], //区域
    allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了
    scrollMode:"auto", //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动
    containerHeight: '600px',
  };
},
methods: {
  getData() {
    this.$$api_order_routeList({
      data: {
        ...this.search_data,
        ...this.query_data
      },
      fn: res => {
        this.result_data = res.routes;
        this.types = res.types;
        this.regions = res.regions;
      }
    })
  },
  loadTop() {
    //...// 加载更多数据
    this.$refs.loadmore.onTopLoaded();
  },
  loadBottom() {
    //...// 加载更多数据
    this.allLoaded = true;// 若数据已全部获取完毕
    this.$refs.loadmore.onBottomLoaded();
  },
  loadPageList (){
    // 查询数据
    this.api.PageList(this.searchCondition).then(data =>{
      // 是否还有下一页,加个方法判断,没有下一页要禁止上拉
      this.isHaveMore(data.result.haveMore);
      this.pageList = data.result.pageList;
      this.$nextTick(function () {
        this.scrollMode = "touch";
      });
    });
  },
  more(){
   
  },
  isHaveMore(isHaveMore){
    // 是否还有下一页,如果没有就禁止上拉刷新
    this.allLoaded = true; //true是禁止上拉加载
    if(isHaveMore){
      this.allLoaded = false;
    }
  },
  changeQuery(obj) {
    this.query_data = obj;
    this.getData()
  },
  toDetail(item) {
    this.$router.push('/order/routeDetail/' + item.routeId + '/' + 1);
  },
  getBoxHeight(){
    let win_height = window.screen.height;
    let header_height = document.querySelector('.header').offsetHeight;
    let menu_height = document.querySelector('.Tab').offsetHeight;
    this.containerHeight = win_height - header_height - menu_height + 2 + 'px';
  },
},

mounted() {
  this.getBoxHeight();
  //this.search_data.navId = this.$route.params.id;
  this.getData()
}

}

回复
阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏