【微信小程序】组件----点击按钮滚动到顶部

在page页面主要使用onPageScroll事件进行页面的scroll监听。

ps：此时的上拉和下拉等操作使用页面的onPullDownRefresh和onReachBottom。

  onPageScroll: function(e) {
    // this.selectComponent 可以访问组件的任何属性及其方法
    if (e.scrollTop > wx.getStorageSync("windowHeight")) {
      this.selectComponent('#movetop').showTop(); //组件展示
    } else {
      this.selectComponent('#movetop').hideTop(); //组件隐藏
    }
  }

其中手机屏幕的信息可以在app.js中，进行一次存储，方便后续 使用。

  onLaunch: function() {
    //获取手机信息
    wx.getSystemInfo({
      success: function(res) {
        wx.setStorageSync("windowHeight", res.windowHeight);
      },
    })

  },

在wxml页面中使用组件：

注意在json文件中引入组件：

  "usingComponents": {
    "move-top": "/components/movetop/move-top"
  },

组件封装：

奉上api文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

在组件js中主要使用

wx.pageScrollTo({

scrollTop: 0,

})

进行返回顶部操作。

PS: 有空记得放github上。