微信小程序页面指定区域局部滚动、下拉刷新和触底加载

需求：一个页面其中一块区域要求实现滚动和下拉刷新和触底加载

在红色区域内上下滚动，下拉刷新和触底加载

分析：1、页面包括四个区块（盒子）：搜索、按钮、Tab按钮、数据展示区，仅需要数据展示区滚动，在上拉时刷新，触底时加载数据

设计：1、数据展示区内使用scroll-view，设置y轴滚动，

           2、计算展示区盒子的高度，仅在范围内允许滚动

           3、保持页面固定，下拉触底时不能带动页面滚动

开发：

1、每个盒子定义一个名称；2、滚动区域外也设一个view

3、scroll-view 设定几个必须参数：

   scroll-y ：上下滚动

  style:"height: {{自定义高度}}px"  允许滚动区域，需要根据不同手机进行计算

bindscrolltoupper 触顶事件，放入下拉刷新处理方法

bindscrolltolower 触底事件，放入触底加载处理方法

4、计算滚动区域的高度

代码如下：

注意事项：回调函数的使用；wx.createSelectoryQuery()的使用

5、滚动到底后的控制，如果不控制，会出现整个page页往上滚动，底部出现空白，如下图

上拉出现问题，底部空白

解决方法：页面配置中增加防滚动， disableScroll:true