From a1b16984711423a4fdd81ad5c014f1754c617c82 Mon Sep 17 00:00:00 2001 From: Jason <574469551@qq.com> Date: Fri, 2 Aug 2019 21:37:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(h5):=20=E4=BD=BFscroll-view=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=9C=A8h5=E4=B8=AD=E6=94=AF=E6=8C=81scrollIntoView?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 虽然说在官网的文档上说h5支持scrollIntoView,但实际上翻看源码,scroll-view并没有处理’scrollIntoView‘这个字段,这里直接通过querySelector获取相关元素并绑定相关API,实际效果与微信小程序端相同。 --- .../src/components/scroll-view/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/taro-components/src/components/scroll-view/index.js b/packages/taro-components/src/components/scroll-view/index.js index 97a35484a78a..bd783c19bce5 100644 --- a/packages/taro-components/src/components/scroll-view/index.js +++ b/packages/taro-components/src/components/scroll-view/index.js @@ -103,6 +103,17 @@ class ScrollView extends Nerv.Component { } this._scrollLeft = nextProps.scrollLeft } + // scrollIntoView + if ( + props.scrollIntoView && + typeof props.scrollIntoView === 'string' && + document.querySelector(`#${props.scrollIntoView}`) + ) + document.querySelector(`#${props.scrollIntoView}`).scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'start', + }); } render() { From 199e46221987af989d0e31b69415bbef674889d8 Mon Sep 17 00:00:00 2001 From: Jason <574469551@qq.com> Date: Fri, 2 Aug 2019 22:03:30 +0800 Subject: [PATCH 2/3] Update index.js --- packages/taro-components/src/components/scroll-view/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/taro-components/src/components/scroll-view/index.js b/packages/taro-components/src/components/scroll-view/index.js index bd783c19bce5..70607ff59403 100644 --- a/packages/taro-components/src/components/scroll-view/index.js +++ b/packages/taro-components/src/components/scroll-view/index.js @@ -107,6 +107,8 @@ class ScrollView extends Nerv.Component { if ( props.scrollIntoView && typeof props.scrollIntoView === 'string' && + document && + document.querySelector && document.querySelector(`#${props.scrollIntoView}`) ) document.querySelector(`#${props.scrollIntoView}`).scrollIntoView({ From cd73e148a631ccfd81d76f0d57a97f5a82202062 Mon Sep 17 00:00:00 2001 From: Jason <574469551@qq.com> Date: Fri, 2 Aug 2019 22:11:28 +0800 Subject: [PATCH 3/3] Update index.js --- .../taro-components/src/components/scroll-view/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/taro-components/src/components/scroll-view/index.js b/packages/taro-components/src/components/scroll-view/index.js index 70607ff59403..003fcbabb772 100644 --- a/packages/taro-components/src/components/scroll-view/index.js +++ b/packages/taro-components/src/components/scroll-view/index.js @@ -105,13 +105,13 @@ class ScrollView extends Nerv.Component { } // scrollIntoView if ( - props.scrollIntoView && - typeof props.scrollIntoView === 'string' && + nextProps.scrollIntoView && + typeof nextProps.scrollIntoView === 'string' && document && document.querySelector && - document.querySelector(`#${props.scrollIntoView}`) + document.querySelector(`#${nextProps.scrollIntoView}`) ) - document.querySelector(`#${props.scrollIntoView}`).scrollIntoView({ + document.querySelector(`#${nextProps.scrollIntoView}`).scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start',