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

この記事では、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 を切り替えると、次のコードに示すように、対応するコンテンツ ボックスのスクロール バーが自動的に上部にスクロールします。 ## プログラム フレームワークはネイティブ フレームワークと同じものを示します。

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render () {
    const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]
    return (
      
        
          
          
          标签页一的内容
          
        
        
          
          
          标签页二的内容
          
        
        
          
          
          标签页三的内容
          
        
      
    )
  }
}

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

  
    
    标签页一的内容
  

  
    标签页一的内容
    
  

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