scroll-top.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. Component({
  2. properties: {
  3. //回顶部按钮距离底部距离 rpx
  4. bottom: {
  5. type: Number,
  6. value: 120
  7. },
  8. //回顶部按钮距离右侧距离 rpx
  9. right: {
  10. type: Number,
  11. value: 24
  12. },
  13. //距离顶部多少距离显示 px
  14. top: {
  15. type: Number,
  16. value: 100
  17. },
  18. //滚动距离
  19. scrollTop: {
  20. type: Number,
  21. observer(val) {
  22. this.change();
  23. }
  24. }
  25. },
  26. data: {
  27. //判断是否显示
  28. visible: false,
  29. //控制显示,主要解决调用api滚到顶部fixed元素抖动的问题
  30. toggle: true
  31. },
  32. methods: {
  33. goTop: function() {
  34. this.setData({
  35. toggle: false
  36. })
  37. wx.pageScrollTo({
  38. scrollTop: 0,
  39. duration: 120
  40. })
  41. setTimeout(() => {
  42. this.setData({
  43. toggle: true
  44. })
  45. }, 220)
  46. },
  47. change() {
  48. let show = this.data.scrollTop > this.data.top;
  49. if ((show && this.data.visible) || (!show && !this.data.visible)) {
  50. return
  51. }
  52. this.setData({
  53. visible: show
  54. })
  55. }
  56. }
  57. })