diff --git a/packages/mip/examples/mip2/scrollToHash-test.html b/packages/mip/examples/mip2/scrollToHash-test.html
new file mode 100644
index 00000000..85f0dfdd
--- /dev/null
+++ b/packages/mip/examples/mip2/scrollToHash-test.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ mip-img
+
+
+
+
+
+
+
+
+
+
+
+
+
点击滚动：
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/mip/src/components/mip-img.js b/packages/mip/src/components/mip-img.js
index 0ee91ce6..9aa23fc1 100644
--- 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
index 042a59d5..b1938ebc 100644
--- 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
index ace176e6..8cb791fb 100644
--- 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 = ``
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
index 3e53bad2..9ae93fb0 100644
--- 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(`
+
+ `)
+ 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()
+ })
})