最近在学习小程序，准备记录一下遇到的问题和分享一些自己写的封装
这次就分享一下上拉下拉加载
如果仔细阅读过文档的都知道，小程序已经封装好了上拉和下拉的方法给大家使用。
下拉刷新
在下拉刷新时，如果需要动画的话，需要在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 都是自己定义的参数,通过即时改变变量而改变控件的状态.
