omi-mp - fix repeated triggering

packages/omi-mp-douban/src/utils/mp.js

@@ -81,6 +81,8 @@ function getUrlParams(url) {
   return args
 }
 
+wx.currentPage = null
+
 export function routeUpdate(vnode, selector, byNative, root) {
   root.childNodes.forEach(child => {
     if (child.style.display !== 'none') {
@@ -93,6 +95,7 @@ export function routeUpdate(vnode, selector, byNative, root) {
     if (ele) {
       ele.style.display = 'block'
       ele.onShow && ele.onShow()
+      wx.currentPage = ele
       document.documentElement.scrollTop = ele._preScrollTop
       document.body.scrollTop = ele._preScrollTop
       //set twice
@@ -103,6 +106,7 @@ export function routeUpdate(vnode, selector, byNative, root) {
     } else {
       const node = render(vnode, root)
       node.onShow && node.onShow()
+      wx.currentPage = node
       document.documentElement.scrollTop = 0
       document.body.scrollTop = 0
     }
@@ -111,6 +115,7 @@ export function routeUpdate(vnode, selector, byNative, root) {
     ele && ele.parentNode.removeChild(ele)
     const node = render(vnode, root)
     node.onShow && node.onShow()
+    wx.currentPage = node
     document.documentElement.scrollTop = 0
     document.body.scrollTop = 0
   }
@@ -135,7 +140,9 @@ wx.request = function (options) {
 wx._bindReachBottom = function (callback, context) {
   window.addEventListener('scroll', () => {
     if (getScrollHeight() - getScrollTop() - getWindowHeight() < 30) {
-      throttle(callback, context)
+      if(context === wx.currentPage){
+        throttle(callback, context)
+      }
     }
   })
 }

packages/omi-mp/gulpfile.js

@@ -141,7 +141,7 @@ class Element extends WeElement {
 
   uninstall = mpOption.onUnload || function() {}
 
-  installed = function(){
+  installed = function() {
     mpOption.onLoad && mpOption.onLoad.call(this, route.query)
     mpOption.onReady && mpOption.onReady.call(this, route.query)
 

packages/omi-mp/src/utils/mp.js

@@ -18,17 +18,17 @@ function Component(option) {
   return option
 }
 
-function noop() {}
+function noop() { }
 
 const wx = {}
 
-wx.canIUse = function() {
+wx.canIUse = function () {
   return false
 }
 
 wx.getStorageSync = noop
 
-wx.getSystemInfoSync = function() {
+wx.getSystemInfoSync = function () {
   return {
     windowWidth: window.innerWidth,
     windowHeight: window.innerHeight,
@@ -36,7 +36,7 @@ wx.getSystemInfoSync = function() {
   }
 }
 
-wx.getSystemInfo = function(options){
+wx.getSystemInfo = function (options) {
   options.success({
     windowWidth: window.innerWidth,
     windowHeight: window.innerHeight,
@@ -44,18 +44,18 @@ wx.getSystemInfo = function(options){
   })
 }
 
-wx.getUserInfo = function() {
+wx.getUserInfo = function () {
   console.warn('wx.getUserInfo method cannot be invoked in browser.')
 }
 
-wx.navigateTo = function(option) {
+wx.navigateTo = function (option) {
   route.query = getUrlParams(option.url)
   route.to(option.url, option)
 }
 
-function getUrlParam(name, url){
-  if(!name){
-      return ''
+function getUrlParam(name, url) {
+  if (!name) {
+    return ''
   }
   url = url || location.search
   name = name.replace(/(?=[\\^$*+?.():|{}])/, '\\')
@@ -64,7 +64,7 @@ function getUrlParam(name, url){
   return !match ? '' : match[1]
 }
 
-wx.setNavigationBarTitle = function(option){
+wx.setNavigationBarTitle = function (option) {
   document.title = option.title
 }
 
@@ -73,17 +73,19 @@ function getUrlParams(url) {
   var queryArray = url.split(/[?&]/).slice(1)
   var i, args = {}
   for (i = 0; i < queryArray.length; i++) {
-      var match = queryArray[i].match(/([^=]+)=([^=]+)/)
-      if (match !== null) {
-          args[match[1]] = decodeURIComponent(match[2])
-      }
+    var match = queryArray[i].match(/([^=]+)=([^=]+)/)
+    if (match !== null) {
+      args[match[1]] = decodeURIComponent(match[2])
+    }
   }
   return args
 }
 
+wx.currentPage = null
+
 export function routeUpdate(vnode, selector, byNative, root) {
   root.childNodes.forEach(child => {
-    if(child.style.display !== 'none'){
+    if (child.style.display !== 'none') {
       child.style.display = 'none'
       child.onHide && child.onHide()
     }
@@ -93,16 +95,18 @@ export function routeUpdate(vnode, selector, byNative, root) {
     if (ele) {
       ele.style.display = 'block'
       ele.onShow && ele.onShow()
+      wx.currentPage = ele
       document.documentElement.scrollTop = ele._preScrollTop
       document.body.scrollTop = ele._preScrollTop
       //set twice
-      setTimeout(function(){
+      setTimeout(function () {
         document.documentElement.scrollTop = ele._preScrollTop
         document.body.scrollTop = ele._preScrollTop
       }, 0)
     } else {
       const node = render(vnode, root)
       node.onShow && node.onShow()
+      wx.currentPage = node
       document.documentElement.scrollTop = 0
       document.body.scrollTop = 0
     }
@@ -111,12 +115,13 @@ export function routeUpdate(vnode, selector, byNative, root) {
     ele && ele.parentNode.removeChild(ele)
     const node = render(vnode, root)
     node.onShow && node.onShow()
+    wx.currentPage = node
     document.documentElement.scrollTop = 0
     document.body.scrollTop = 0
   }
 }
 
-wx.request = function(options){
+wx.request = function (options) {
   const request = ajax({
     method: options.method || 'GET',
     url: options.url,
@@ -124,7 +129,7 @@ wx.request = function(options){
     headers: options.header
   })
 
-  request.then((data, xhr)=>{
+  request.then((data, xhr) => {
     options.success({
       data: data,
       statusCode: xhr.status
@@ -132,6 +137,57 @@ wx.request = function(options){
   })
 }
 
+wx._bindReachBottom = function (callback, context) {
+  window.addEventListener('scroll', () => {
+    if (getScrollHeight() - getScrollTop() - getWindowHeight() < 30) {
+      if(context === wx.currentPage){
+        throttle(callback, context)
+      }
+    }
+  })
+}
+
+function getScrollHeight() {
+  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
+  if (document.body) {
+    bodyScrollHeight = document.body.scrollHeight;
+  }
+  if (document.documentElement) {
+    documentScrollHeight = document.documentElement.scrollHeight;
+  }
+  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
+  return scrollHeight;
+}
+
+function getScrollTop() {
+  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
+  if (document.body) {
+    bodyScrollTop = document.body.scrollTop;
+  }
+  if (document.documentElement) {
+    documentScrollTop = document.documentElement.scrollTop;
+  }
+  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
+  return scrollTop;
+}
+
+function getWindowHeight() {
+  var windowHeight = 0;
+  if (document.compatMode == "CSS1Compat") {
+    windowHeight = document.documentElement.clientHeight;
+  } else {
+    windowHeight = document.body.clientHeight;
+  }
+  return windowHeight;
+}
+
+function throttle(method, scope) {
+  clearTimeout(method.tId);
+  method.tId= setTimeout(function(){
+      method.call(scope);
+  }, 300);
+}
+
 window.wx = wx
 window.App = App
 window.getApp = getApp