小程序 上拉刷新 下拉加载 代码备忘

版权声明：转载请评论留言 https://blog.csdn.net/solocao/article/details/86363151

使用wux-refresher扩展实现上拉刷新，下拉加载，再配合上小程序原生的scroll-view感觉很完美了。

核心代码如下：

 <div class="m-active-list">
   <wux-refresher id="wux-refresher" @loadmore="more" @refresh="refresh">
     <scroll-view scroll-y class="ac-scroll">
       <active-row-hot :data="active" v-for="(active,index) in activeData" :key="index"></active-row-hot>
     </scroll-view>
   </wux-refresher>
 </div>

 .m-active-list {
  position: absolute;
  bottom: 20rpx;
  top: 50px;
  left: 2%;
  width: 96%;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: #f4f4f4 0px 1px 1px 1px;

  .ac-scroll {
    height: calc(100vh - 160rpx);
  }
}