微信小程式自定義下拉重新整理

首先是布局檔案：

// wxml布局檔案

'height:100%' scroll-y=
'}' bindscroll=
'scorll'
>
//監聽布局touch事件
='column' bindtouchstart=
'start' bindtouchend=
'end' bindtouchmove=
'move'
>
//重新整理狀態view
'height:}px;background:gray'
class
='refresh'
>
}<
/view>
='item' wx:
for=
'}'>
='title'
>
}<
/view>
='bottom'
>
新華網<
/view>
='comment'
>
2344評<
/view>
<
/view>
<
/view>
<
/view>
<
/scroll-view>

// js檔案

var sy;
//記錄手指的y座標
component(,
/** * 元件的初始資料
*/data:
,/**
* 元件的方法列表
*/methods:
,move
(e)//scorll-view已經滑動到頂部，繼續下拉進入下拉狀態if(
this
.data.scrolltop <=0)
)}var tempdelta =
0 console.
log(
'hei : '
+this
.data.hei)
if(delta >0)
) tempdelta =
this
.data.hei + delta /
(this
.data.hei -50)
//增大下拉阻尼感
}else
)//手指移動未到閾值，按正常滑動增加高度
tempdelta =
this
.data.hei + delta
}}else
this
.setdata()
}//滑動完成設定重新整理view高度
this
.setdata()
}//每次滑動事件後記錄y座標
sy = e.touches[0]
.clienty
},end
(e))
this
.setdata()
//模擬耗時操作，2秒後恢復正常狀態
settimeout
(function()
)},2000)}
else)}
},scorll
(e))}}
}})

微信小程式預設下拉重新整理和自定義下拉重新整理的方式

1.預設下拉重新整理 在指定頁面對應的.json配置檔案中加入 enablepulldownrefresh true,backgroundtextstyle dark 在對應的.js檔案中，寫入onpulldownrefresh，如果存在則替換就好了 頁面相關事件處理函式 監聽使用者下拉動作 onp...

微信小程式下拉重新整理

使用了幾個方案，發現幾個注意點需要注意一下 方案一 整個布局只使用乙個scroll view，類目和列表放到該控制項下，這種狀態下重新整理可以，但是類目不能固定在頂部 方案二 整個布局使用乙個scroll view，裡面再巢狀使用scroll view，這種狀態下上拉幅度大的時候也會觸發下拉重新整理...

微信小程式 下拉重新整理

步驟一注意 enablepulldownrefresh 允許下拉重新整理 backgroundtextstyle 重新整理動畫中那個點的顏色 ios 值可以為dark light 步驟二 js檔案配置 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 下...