小程序上拉下拉加载

最近在学习小程序，准备记录一下遇到的问题和分享一些自己写的封装

这次就分享一下上拉下拉加载

如果仔细阅读过文档的都知道，小程序已经封装好了上拉和下拉的方法给大家使用。

下拉刷新

在下拉刷新时，如果需要动画的话，需要在Json文件中加入相关的属性

{

"enablePullDownRefresh":true

}

---

enablePullDownRefresh          Boolean类型         是否开启下拉刷新，详见页面相关事件处理函数。

---

这个属性如果在app.json中使用，则全部页面的下拉刷新的动画都会显示，所以推荐在需要使用的页面上开启这个方法

每次下拉的时候都会进入下面这个方法

---

onPullDownRefresh               function            页面相关事件处理函数——监听用户下拉动作

---

只需要在这个方法中写入你的加载刷新的方法就可以了

上拉加载

在小程序中上拉加载给出了触发方法，但是却没有和下拉刷新一样给出动画效果，所以我们需要自己写一个动画来补这个坑，下面先说上拉加载的方法，这个并不需要在json文件中设置任何属性

---

onReachBottom                     function                              页面上拉触发底事件的处理函数

---

下面分享一个上拉加载的控件，比较简单：

WXML:

<template name="load-more">

<view wx:if="{{loading}}" class="weui-loadmore">

<view class="weui-loading"></view>

<view class="weui-loadmore__tips">正在加载</view>

</view>

<view wx:elif="{{hasMore}}" class="weui-loadmore weui-loadmore_line">

<view class="weui-loadmore__tips weui-loadmore__tips_in-line">加载更多</view>

</view>

<view wx:else class="weui-loadmore weui-loadmore_line">

<view class="weui-loadmore__tips weui-loadmore__tips_in-line">

{{noMoreLabel ? noMoreLabel : '没有更多数据'}}

</view>

</view>

</template>

其中loading,hasMore都是传进来改变状态的参数,loading是加载中状态,hasMore是还可以继续请求,都是 BOOL 类型.

WXSS:

.weui-loadmore__tips_in-line { background-color: #f8f8f8;}

在使用的WXML 文件中需要引入头文件:

<import src="../shop/templates/load-more.wxml" />

这个路径是你存放文件的地址,引入路径不对会报错

下面给出一个自己写的例子:

这两个 hasMore 和 loading 都是自己定义的参数,通过即时改变变量而改变控件的状态.

注意：有人在自己写了方法之后运行发现，并没有走这个方法，那你检查一下你的page是不是有两个这个方法， 删除多余的一个即可