小程序下拉刷新/上拉加载

方法一

---

查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部

在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效。
还可以在单独页面设置则对当前json文件页面设置有效，如下；

XWML代码如下：

{
"enablePullDownRefresh": true
}

js代码

onPullDownRefresh: function () {
    console.log("下拉");
    wx.stopPullDownRefresh()；//停止下拉
  },
  onReachBottom: function () {
    console.log("上拉");
  },

方法二

---

使用scroll-view实现上拉加载，下拉刷新

wxml

<scroll-view scroll-y style="height: 200px" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
    <view style="background: red; width: 100px; height: 100px" ></view>
    <view style="background: green; width: 100px; height: 100px"></view>
    <view style="background: blue; width: 100px; height: 100px"></view>
    <view style="background: yellow; width: 100px; height: 100px"></view>
</scroll-view>

注意：
scroll-view为滚动视图，分为水平滚动和垂直滚动。滚动视图常用的地方一般都是Item项比较多的界面
1.scroll-view 要设置高度，否则的话scroll-view不会生效。
2.scroll-view 的宽和加上样式–> overflow:hidden;white-space:nowrap;
3.scroll-view 用 display:flex; 是没有作用的；
4.scroll-view 的子元素不可以用 float 浮动；
5.scroll-view 的子元素要用 dislay:inline-block; 进行元素的横向编排；
演示代码：

<!--垂直滚动，这里必须设置高度-->
<scroll-view scroll style="height: 200px">
    <view style="background: red; width: 100px; height: 100px" ></view>
    <view style="background: green; width: 100px; height: 100px"></view>
    <view style="background: blue; width: 100px; height: 100px"></view>
    <view style="background: yellow; width: 100px; height: 100px"></view>
</scroll-view>

<!--水平滚动-->
<scroll-view scroll-x style=" white-space: nowrap; display: flex" >
  <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
  <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
  <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>