需求：一個(gè)頁(yè)面其中一塊區(qū)域要求實(shí)現(xiàn)滾動(dòng)和下拉刷新和觸底加載

在紅色區(qū)域內(nèi)上下滾動(dòng)，下拉刷新和觸底加載

分析：1、頁(yè)面包括四個(gè)區(qū)塊（盒子）：搜索、按鈕、Tab按鈕、數(shù)據(jù)展示區(qū)，僅需要數(shù)據(jù)展示區(qū)滾動(dòng)，在上拉時(shí)刷新，觸底時(shí)加載數(shù)據(jù)

設(shè)計(jì)：1、數(shù)據(jù)展示區(qū)內(nèi)使用scroll-view，設(shè)置y軸滾動(dòng)，

? ? ? ? ? ?2、計(jì)算展示區(qū)盒子的高度，僅在范圍內(nèi)允許滾動(dòng)

? ? ? ? ? ?3、保持頁(yè)面固定，下拉觸底時(shí)不能帶動(dòng)頁(yè)面滾動(dòng)

開(kāi)發(fā)：

1、每個(gè)盒子定義一個(gè)名稱；2、滾動(dòng)區(qū)域外也設(shè)一個(gè)view

3、scroll-view 設(shè)定幾個(gè)必須參數(shù)：

? ?scroll-y ：上下滾動(dòng)

? style:"height: {{自定義高度}}px"? 允許滾動(dòng)區(qū)域，需要根據(jù)不同手機(jī)進(jìn)行計(jì)算

bindscrolltoupper 觸頂事件，放入下拉刷新處理方法

bindscrolltolower 觸底事件，放入觸底加載處理方法

4、計(jì)算滾動(dòng)區(qū)域的高度

代碼如下：

注意事項(xiàng)：回調(diào)函數(shù)的使用；wx.createSelectoryQuery()的使用

5、滾動(dòng)到底后的控制，如果不控制，會(huì)出現(xiàn)整個(gè)page頁(yè)往上滾動(dòng)，底部出現(xiàn)空白，如下圖

上拉出現(xiàn)問(wèn)題，底部空白

解決方法：頁(yè)面配置中增加防滾動(dòng)， disableScroll:true