1.html部分

<div class="detail" ref="wrapper">
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
               ref="loadmore" :bottom-all-loaded="allLoaded" :auto-fill="false">
    <ul>
      <li v-for="(item,index) in projectList" @click="go(item,index)">
        <div class="wrap">

          <div class="img">
            <img :src="item.pictures" alt="" :onerror="defaultImg">
            <div v-if="item.topStatus===1" class="zhiding"></div>
          </div>
          <div class="msg">
            <div class="look"><span></span>{{item.favorite_count}}</div>
            <h4>{{item.project_name}}</h4>
            <p>{{item.address}}</p>
            <p>建築面積：{{item.acreage}}㎡</p>
            <div class="price">銷售均價：<span>{{item.price}}元/天/㎡</span></div>
            <div class="tags" v-if="item.tag"><span v-if="index1 < 3" v-for="(item1,index1) in item.tag">{{item1}}</span></div>
          </div>
        </div>
      </li>
    </ul>
    <div class="noInner" v-if="more">暫無更多內容嘍！</div>
  </mt-loadmore>
</div>
 

2.css部分

.detail{
  width: 7.5rem;
  //overflow: scroll;
  background: #fff;
  ul{
    width: 7.5rem;
    overflow: hidden;
    li{
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      display: flex;
      margin: .3rem;
      border-bottom: 0.01rem solid #eaeaea;
      &.cur{
        h4{
          color: #aaa!important;
        }
      }
      .select{
        width:0.45rem;
        height: 1.62rem;
        margin-right: .2rem;
        position: relative;
        .check{
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -.2rem;
          margin-top: -.2rem;
          width: .45rem;
          height: .45rem;
          background: url("../../../static/images/common/select.png") no-repeat #fff;
          background-size: .4rem .4rem;
          &.cur{
            background-image: url("../../../static/images/common/select-bg.png");
          }
        }
        input{
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -.2rem;
          margin-top: -.2rem;
          width: .4rem;
          height: .4rem;
          opacity: 0;
        }
      }
      .wrap{
        display: flex;
        height: 2.1rem;
        padding-bottom: .3rem;
        position: relative;

        .img{
          width: 2.78rem;
          margin-right:.3rem;
          position: relative;
          img{
            width: 2.78rem;
            height: 2.1rem;
          }
          .zhiding{
            position: absolute;
            left: 0;
            top: 0;
            width: 0.74rem;
            height: 0.34rem;
            background-image: url("../../../static/images/common/zhiding.png");
            -webkit-background-size: .74rem .34rem;
            background-size: .74rem .34rem;
          }
        }
        .msg{
          width: 4.74rem;
          position: relative;
          .look{
            position: absolute;
            width: 1rem;
            right: .5rem;
            top: .45rem;
            font-size: .28rem;
            color:#aaa;
            span{
              display: inline-block;
              width: .28rem;
              height: .18rem;
              margin-right: .1rem;
              background: url("../../../static/images/common/look.png");
              -webkit-background-size: 100% 100%;
              background-size: 100% 100%;
            }
          }
          .price{
            font-size: .28rem;
            margin-bottom: .1rem;
            span{
              margin-left: .05rem;
              font-size: .28rem;
              font-weight: normal;
              color: #e8584f;
            }
          }
          h4{
            width: 3.8rem;
            height: .32rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: .32rem;
            color: #333;
            font-weight:bold;
            margin-bottom: 0.15rem;
          }
          p{
            font-size: .28rem;
            height: .24rem;
            color: #aaa;
            margin-bottom: 0.2rem;
          }
          .tags{
            span{
              display: inline-block;
              padding: 0rem .08rem;
              line-height: .36rem;
              text-align: center;
              background: #E5F1FF;
              color: #64aaff;
              font-size: .23rem;
              margin-right: .12rem;
            }
          }
        }

      }
    }
  }
  .noInner{
    text-align: center;
    font-size: .26rem;
    color: #898989;
  }
}
 

3.js部分

loadTop(){//下拉重新整理
  $(".shoplist ul li").removeClass("cur");
  var that = this;
  var data = {
    cityId: sessionStorage.cityId || 110100, //所屬城市【必傳】
    pageSize: this.pageSize, //每頁資料量【必傳】
    pageNum: this.pageNum, //頁碼從1開始【必傳】
    projectType: 1, //專案型別，1是銷售，2是招商【必傳】
    projectDistrictId: this.regionSelect, //區域篩選
    houseType: this.typeSelect, //建築型別篩選
    beginPrice: this.beginpriceSelect, //價格段篩選
    endPrice: this.endpriceSelect, //價格段篩選
    acreageRangeValue: this.areaSelect, //面積段篩選
    projectName: this.search //專案名稱篩選
  }
  setTimeout(function () {
    that.$http({
      url: that.changeData() + '/project/list',
      method: "post",
      params: data
    }).then(function(res){
      console.log(res)
      that.projectList = res.data.projectList;
      that.$refs.loadmore.onTopLoaded();
    }.bind(this)).catch(function(err){
      console.log("商店列表頁面錯誤：",err)
    })
  },1000)
},
loadBottom() {//上拉載入
  var that = this;
  this.pageNum1++;
  that.allLoaded = false;
  var data = {
    cityId: sessionStorage.cityId || 110100, //所屬城市【必傳】
    pageSize: this.pageSize, //每頁資料量【必傳】
    pageNum: this.pageNum1, //頁碼從1開始【必傳】
    projectType: 1, //專案型別，1是銷售，2是招商【必傳】
    projectDistrictId: this.regionSelect, //區域篩選
    houseType: this.typeSelect, //建築型別篩選
    beginPrice: this.beginpriceSelect, //價格段篩選
    endPrice: this.endpriceSelect, //價格段篩選
    acreageRangeValue: this.areaSelect, //面積段篩選
    projectName: this.search //專案名稱篩選
  }
  setTimeout(function () {
    that.$http({
      url: that.changeData() + '/project/list',
      method: "post",
      params: data
    }).then(function(res){
      console.log(res)
      that.projectList = that.projectList.concat(res.data.projectList)
      if(res.data.projectList <= 0){
        that.allLoaded = true;
      }
      that.$refs.loadmore.onBottomLoaded();
    }.bind(this)).catch(function(err){
      console.log("商店列表頁面錯誤：",err)
    })
  },1000)
},
handleBottomChange(){
  var that = this;
  if(this.allLoaded == true){
    this.more = true;
    setTimeout(function () {
      that.more = false;
    },2000)
  }
},