ミニプログラムで指定された位置に従ってスクロールビューをスクロールする方法の簡単な分析

この記事では、WeChat アプレットで指定した位置に応じてスクロール ビューをスクロールさせる方法を紹介します。追加の js スクリプトを記述することなく、優れたエクスペリエンスを得ることができます。皆さんのお役に立てれば幸いです。

背景は次のようになります。WeChat アプレットには tab 切り替えページがあり、tab 切り替えページには 2 つのコンテンツがありますscroll-view を使用して作成し、tab ページを切り替えるときに、scroll-view の対応するスクロール バーが最前面に表示されるようにする必要があります。 。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

公式ドキュメントの説明 scroll-view# に scroll-into-view# があることがわかります。 #属性、この属性の説明は次のとおりです。

scroll-into-view の値は、特定のサブ要素 ID である必要があります (ID を数字で始めることはできません)。スクロールできる方向を設定し、その方向の要素までスクロールします。

scroll-view# に ID 値を入力する限り、この属性について大騒ぎすることができます。 ## カスタム値を設定すると、tab を切り替えると、次のコードに示すように、対応するコンテンツ ボックスのスクロール バーが自動的に上部にスクロールします。 ## プログラム フレームワークはネイティブ フレームワークと同じものを示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import Taro from &amp;#39;@tarojs/taro&amp;#39; import { View } from &amp;#39;@tarojs/components&amp;#39; import { AtTabs, AtTabsPane } from &amp;#39;taro-ui&amp;#39; export default class Index extends Taro.Component { constructor () { super(...arguments) this.state = { current: 0, } } handleClick (value) { this.setState({ current: value }) } render () { const tabList = [{ title: &amp;#39;标签第一页&amp;#39; }, { title: &amp;#39;标签第二页&amp;#39; }, { title: &amp;#39;标签第三页&amp;#39; }] return ( &lt;AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}&gt; &lt;AtTabsPane current={this.state.current} index={0} &gt; &lt;ScrollView scrollY scrollIntoView=&amp;#39;content-0&amp;#39;&gt; &lt;View id=&amp;#39;content-0&amp;#39;&gt;&lt;/View&gt; 标签页一的内容 &lt;/ScrollView&gt; &lt;/AtTabsPane&gt; &lt;AtTabsPane current={this.state.current} index={1} &gt; &lt;ScrollView scrollY scrollIntoView=&amp;#39;content-1&amp;#39;&gt; &lt;View id=&amp;#39;content-1&amp;#39;&gt;&lt;/View&gt; 标签页二的内容 &lt;/ScrollView&gt; &lt;/AtTabsPane&gt; &lt;AtTabsPane current={this.state.current} index={2} &gt; &lt;ScrollView scrollY scrollIntoView=&amp;#39;content-2&amp;#39;&gt; &lt;View id=&amp;#39;content-2&amp;#39;&gt;&lt;/View&gt; 标签页三的内容 &lt;/ScrollView&gt; &lt;/AtTabsPane&gt; &lt;/AtTabs&gt; ) } }</pre><div class="contentsignin">ログイン後にコピー</div></div> たとえば、最初の tab# の scroll-view

content-0 を持つ view## を配置します。 、tab ページを切り替えると、scroll-view は scroll-into-view に従って子要素の ID に配置されます。属性を設定し、スクロール バーが自動的に最上部に移動する効果を実現します。

<AtTabsPane current={this.state.current} index={0} >
  <ScrollView scrollY scrollIntoView=&#39;content-0&#39;>
    <View id=&#39;content-0&#39;></View>
    标签页一的内容
  </ScrollView>
</AtTabsPane>

<AtTabsPane current={this.state.current} index={0} >
  <ScrollView scrollY scrollIntoView=&#39;content-0&#39;>
    标签页一的内容
    <View id=&#39;content-0&#39;></View>
  </ScrollView>
</AtTabsPane>

以上がミニプログラムで指定された位置に従ってスクロールビューをスクロールする方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。