微信小程序下拉刷新&上拉加载

最新推荐文章于 2024-10-08 08:38:42 发布

PicriL@Shmily

最新推荐文章于 2024-10-08 08:38:42 发布

阅读量402

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/ikun__/article/details/116764990

版权

本文介绍了如何在微信小程序中实现下拉刷新和上拉加载功能。下拉刷新涉及页面结构和样式的设置，数据初始化，以及获取商品列表并关闭下拉刷新窗口。上拉加载则需要判断是否有下一页，通过监听触底事件来决定是否发起请求加载更多数据。

摘要由CSDN通过智能技术生成

前言：

下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh() 上拉加载触底onReachBottom()
也可以scroll-view进行布局，这个就要个人喜好，比如滚动条滚动、触底、触顶着三个事件，中的三个属性 scroll-top：设置滚动条的位置，scroll-y：是否允许竖向滑动，height:是组件的高度

Bindscrolltolower是绑定触底触发的事件
Bindscroll 是滚动触发的时间
Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件，所以不合适用来当做下拉刷新

下拉刷新

首先把页面结构以及样式布置好让列表数据溢出滚动

<Tabs tabs="{
  {tabs}}" bindtabsItemChange="handleTabsItemChange" >
  
  <block wx:if="{
  {tabs[0].isActive}}">
    <view class="first_tab">
        <navigator class="goods_item"
        wx:for="{
  {goodsList}}"
        wx:key="goods_id"
        url="/pages/goods_detail/detail?goods_id={
  {item.goods