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

最新推荐文章于 2022-10-21 13:30:00 发布

原创最新推荐文章于 2022-10-21 13:30:00 发布 · 793 阅读

1 ·

CC 4.0 BY-SA版权

mpvue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何利用wux-refresher组件配合小程序原生scroll-view实现上拉刷新和下拉加载功能，提供了核心代码示例。

使用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);
  }
}