需求：一个页面其中一块区域要求实现滚动和下拉刷新和触底加载
在红色区域内上下滚动，下拉刷新和触底加载
分析：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
网友评论