ホームページ > 記事 > WeChat アプレット > ミニプログラムで指定された位置に従ってスクロールビューをスクロールする方法の簡単な分析
ミニプログラムで指定された位置に従ってスクロールビューをスクロールする方法の簡単な分析
- 青灯夜游転載
- 2021-11-08 10:11:563955ブラウズ
この記事では、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 を切り替えると、次のコードに示すように、対応するコンテンツ ボックスのスクロール バーが自動的に上部にスクロールします。 ## プログラム フレームワークはネイティブ フレームワークと同じものを示します。 <pre class="brush:js;toolbar:false;">import Taro from &#39;@tarojs/taro&#39;
import { View } from &#39;@tarojs/components&#39;
import { AtTabs, AtTabsPane } from &#39;taro-ui&#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: &#39;标签第一页&#39; }, { title: &#39;标签第二页&#39; }, { title: &#39;标签第三页&#39; }]
return (
<AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
<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={1} >
<ScrollView scrollY scrollIntoView=&#39;content-1&#39;>
<View id=&#39;content-1&#39;></View>
标签页二的内容
</ScrollView>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2} >
<ScrollView scrollY scrollIntoView=&#39;content-2&#39;>
<View id=&#39;content-2&#39;></View>
标签页三的内容
</ScrollView>
</AtTabsPane>
</AtTabs>
)
}
}</pre> たとえば、最初の tab# の scroll-view
content-0 を持つ view## を配置します。 、tab ページを切り替えると、scroll-view は scroll-into-view に従って子要素の ID に配置されます。属性を設定し、スクロール バーが自動的に最上部に移動する効果を実現します。
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
<View id='content-0'></View>
标签页一的内容
</ScrollView>
</AtTabsPane>同様に、スクロール バーを最下位の位置にスクロールする必要がある場合は、対応するサブ要素 ID を最下位に置くだけです。たとえば、一部のチャット インターフェイスでは、最新のものを見つける必要があります。記事 <AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
标签页一的内容
<View id='content-0'></View>
</ScrollView>
</AtTabsPane>プログラミング関連の知識については、プログラミング ビデオ をご覧ください。 ！ 以上がミニプログラムで指定された位置に従ってスクロールビューをスクロールする方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。