回到顶部按钮用法介绍

此组件提供的选项有:

• 1.是否隐藏此回到顶部按钮,默认隐藏

hidden: {
  type: Boolean,
  value: true
}

• 2.回到顶部所需时间

duration: {
  type: Number,
  value: 300
}

• 3.按钮的图片背景

src: {
  type: String,
  value: ''
}

如何安装此组件

• 1.在项目根目录下新建名为miniprogram的文件夹
• 2.运行npm init(将生成package.json文件)
• 3.运行npm install go-to-top --production(不要用cnpm,亲测这一步用cnpm则第5步构建失败)
• 4.在小程序编辑器中勾选使用npm模块
• 5.在小程序编辑器中点击构建npm

如何使用此组件

• 1 .wxml

<go-to-top hidden="{{hideGoToTop}}"
           src="https://s.gravatar.com/avatar/85c0f15298ab34293d7a6cd835653cda?size=50&default=retro"/>

• 2 .js

data:{
    hideGoToTop:true,
},
onPageScroll(e) {
    // 可根据自身需求加入防抖
    this.setData({
      hideGoToTop: e.scrollTop < 500
    });
}

• 3 .json

{
  "usingComponents": {
    "go-to-top": "/miniprogram/miniprogram_npm/go-to-top/index"
  }
}