wx小程序上拉、下拉刷新，返回顶部

文章参考

wx小程序 页面配置wx小程序 onPullDownRefreshwx小程序 stopPullDownRefresh

onPullDownRefresh() 监听用户下拉刷新事件

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()监听用户上拉触底事件

页面的内容一定要超过屏幕的高度，否则不会触发该事件可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Object object) 监听用户滑动页面事件

无论内容是否撑满整个页面，页面滑动会触发该事件onPullDownRefresh 和 onReachBottom 事件触发，一定会触发onPageScroll 事件onPullDownRefresh 和 onReachBottom 只会触发一次， onPageScroll 事件会触发多次

返回到顶部

wx.pageScrollTo({ scrollTop: 0, })

综合案例

<!-- <view class="" style="height:100%;"> --> <view class="" style=""> <view wx:for="{{numberArr}}" wx:key="{{index}}"> item-{{index}} </view> <button bindtap='backTopAction'> 返回顶部 </button> </view> Page({ /** * 页面的初始数据 */ data: { numberArr: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, // 返回到顶部 backTopAction: function () { wx.pageScrollTo({ scrollTop: 0, }) }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("onPullDownRefresh") wx.stopPullDownRefresh() }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.log("onReachBottom") }, // 滑动 onPageScroll: function (resObj) { // console.log("onPageScroll") // console.log(resObj.scrollTop); }, })