8.13 上线 (#678)

* 修复 scrollToHash 当锚点的祖先存在�定位元素时不能滚动到锚点的问题 (#675)
mipengine · Aug 13, 2019 · bcb4d3a · bcb4d3a
1 parent e3cfbd5
commit bcb4d3a
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 6 deletions.
diff --git a/packages/mip/examples/mip2/scrollToHash-test.html b/packages/mip/examples/mip2/scrollToHash-test.html
@@ -0,0 +1,68 @@
+<!--htmlcs-disable-->
+<!DOCTYPE html>
+<html mip>
+<head>
+  <meta charset="utf-8">
+  <title>mip-img</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <link rel="stylesheet" href="../../dist/mip.css"></link>
+  <script>
+    window.onerror = function (message, source, lineno, colno, error) {
+      window.alert('Ops, js 报错了，请联系 FE 修复')
+      window.alert(message)
+      window.alert(source + ':' + lineno + ':' + colno)
+      window.alert(JSON.stringify(error))
+    }
+
+    function onClick(ele, type, event) {
+      const target = event.target
+      const hash = target.dataset.hash
+      MIP.viewer.page.scrollToHash(hash)
+    }
+  </script>
+  <style mip-custom>
+    button {
+      padding: 5px;
+      background-color: cadetblue;
+      font-size: 20px;
+    }
+    .content {
+      height: 500px;
+      width: 400px;
+      background: #ccc;
+    }
+    .parent {
+      position: relative;
+    }
+    a {
+      margin: 20px;
+      font-size: 20px;
+    }
+  </style>
+
+</head>
+
+<body>
+  <div>
+    <h2>点击滚动：</h2>
+    <button onclick="onClick(this, type, event)" data-hash="#anchor1">锚点1</button>
+    <button onclick="onClick(this, type, event)" data-hash="#anchor2">锚点2</button>
+  </div>
+
+  <div class="content"></div>
+  <div class="parent">
+    <div class="content"></div>
+    <a id="anchor1">锚点1</a>
+    <div class="content"></div>
+    <a id="anchor2">锚点2</a>
+  </div>
+  <div class="content"></div>
+  <div class="content"></div>
+</body>
+
+<script src="../../dist/mip.js"></script>
+<!-- <script src="https://c.mipcdn.com/static/v2/mip.js"></script> -->
+</html>
diff --git a/packages/mip/src/components/mip-img.js b/packages/mip/src/components/mip-img.js
@@ -396,6 +396,7 @@ class MipImg extends CustomElement {
     let placeholder = document.createElement('mip-i-space')
     placeholder.classList.add('mip-default-placeholder')
 
+    // FIX ME: padding-bottom 应设更合理的值，不至于太大而导致其他元素不在视窗
     this.element.appendChild(css(
       placeholder, {
         'padding-bottom': '75%',

diff --git a/packages/mip/src/page/index.js b/packages/mip/src/page/index.js
@@ -11,7 +11,7 @@ import {
 } from './util/dom'
 import {getCleanPageId, parsePath} from './util/path'
 import {supportsPassive} from './util/feature-detect'
-import {scrollTo} from './util/ease-scroll'
+import {handleScrollTo} from './util/ease-scroll'
 import {
   MAX_PAGE_NUM,
   CUSTOM_EVENT_SCROLL_TO_ANCHOR,
@@ -26,7 +26,6 @@ import {
 } from './const/index'
 import {fn} from '../util'
 import {customEmit} from '../util/custom-event'
-import viewport from '../viewport'
 import performance from '../performance'
 import '../styles/mip.less'
 import {stringifyQuery, resolveQuery} from './util/query';
@@ -79,9 +78,10 @@ class Page {
 
       /* istanbul ignore next */
       if (anchor) {
-        scrollTo(anchor.offsetTop, {
-          scrollTop: viewport.getScrollTop()
-        })
+        handleScrollTo(anchor, {duration: 500, position: 'top'})
+        // scrollTo(anchor.offsetTop, {
+        //   scrollTop: viewport.getScrollTop()
+        // })
       }
     } catch (e) {}
   }

diff --git a/packages/mip/test/specs/components/mip-img.spec.js b/packages/mip/test/specs/components/mip-img.spec.js
@@ -196,7 +196,8 @@ describe('mip-img', function () {
     await timer.sleep(500)
     expect(mipPopWrap.style.display).to.equal('none')
     mipImgWrapper.removeChild(carou)
-  }).timeout(4000)
+  }).timeout(5000)
+
   it('should not popup if the image is not loaded', async () => {
     mipImgWrapper.innerHTML = `<mip-img popup src="https://www.wrong.org?test=1"></mip-img>`
     let mipImg = mipImgWrapper.querySelector('mip-img')

diff --git a/packages/mip/test/specs/page/page.spec.js b/packages/mip/test/specs/page/page.spec.js
@@ -11,6 +11,10 @@ import {
   MESSAGE_BROADCAST_EVENT
 } from 'src/page/const'
 
+import { dom } from 'src/util'
+import viewport from 'src/viewport'
+import Services, {installTimerService} from 'src/services'
+
 /* eslint-disable no-unused-expressions */
 /* globals describe, it, expect, afterEach, sinon */
 
@@ -185,6 +189,8 @@ describe('page API #UI', function () {
   let spy
   let spy2
   let page = window.MIP.viewer.page
+  installTimerService()
+  const timer = Services.timer()
 
   afterEach(function () {
     if (spy && spy.restore) {
@@ -228,4 +234,24 @@ describe('page API #UI', function () {
     spy2 = sinon.stub(page, 'isRootPage').value(false)
     page.toggleDropdown(true)
   })
+
+  it('.scrollToHash', async () => {
+    const content = dom.create(`
+      <div>
+        <div style="height: 500px;width: 500px"></div>
+        <div style="position: relative">
+          <div style="height: 500px;width: 500px"></div>
+          <a id="target"></a>
+        </div>
+        <div style="height: 2000px;width: 500px"></div>
+      </div>
+    `)
+    document.body.appendChild(content)
+    const anchor = document.getElementById('target')
+    page.scrollToHash('#target')
+    await timer.sleep(600)
+    expect(viewport.getScrollTop()).to.be.equal(anchor.offsetTop+anchor.parentElement.offsetTop)
+    expect(anchor.getBoundingClientRect().top).to.be.equal(0)
+    content.remove()
+  })
 })