scrollView.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. // myComponents/scrollView/scrollView.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. properties: {
  7. customStyle:{
  8. type:String,
  9. value:"height: 100px;"
  10. },
  11. threshold:{
  12. type:Number,
  13. value:100
  14. },
  15. triggered:{
  16. type:Boolean,
  17. value:false
  18. },
  19. hasMore:{
  20. type:Boolean,
  21. value:true
  22. },
  23. load:{
  24. type:Boolean,
  25. value:false
  26. }
  27. },
  28. /**
  29. * 组件的初始数据
  30. */
  31. data: {
  32. show:false,
  33. scrollHeight:0,
  34. scrollTop: 0,
  35. threshold2: 50
  36. },
  37. attached:function(){
  38. // const query = wx.createSelectorQuery().in(this);
  39. // query.select('.scroll-view-class').boundingClientRect(rect => {
  40. // this.setData({
  41. // scrollHeight: rect.height
  42. // });
  43. // }).exec();
  44. },
  45. /**
  46. * 组件的方法列表
  47. */
  48. methods: {
  49. onRefresh(){
  50. this.triggerEvent('onRefresh')
  51. },
  52. handleScroll(e) {
  53. if (this.data.scrollHeight && this.data.scrollTop) {
  54. const distanceToBottom = this.data.scrollHeight - this.data.scrollTop - window.innerHeight;
  55. if (distanceToBottom <= this.data.threshold2) {
  56. // 触发加载更多数据的操作
  57. return true
  58. }
  59. }
  60. return false
  61. },
  62. loadMore(e){
  63. // this.setData({
  64. // scrollTop: e.detail.scrollTop
  65. // });
  66. // var a = this.handleScroll()
  67. // if(!a){
  68. // return
  69. // }
  70. if(this.data.hasMore){
  71. this.triggerEvent('loadMore')
  72. return
  73. }
  74. this.setData(
  75. {
  76. show:true
  77. }
  78. )
  79. // wx.showToast({
  80. // title: '没有更多了',
  81. // })
  82. var self = this
  83. setTimeout(function () {
  84. self.setData({
  85. show: false,
  86. })
  87. }, 2000);
  88. }
  89. },
  90. })