Eine kurze Analyse, wie man die Scroll-Ansicht entsprechend der angegebenen Position im Miniprogramm scrollen lässt

In diesem Artikel erfahren Sie, wie Sie die Bildlaufansicht entsprechend der angegebenen Position im WeChat-Applet scrollen lassen. Ich hoffe, dass dies für alle hilfreich ist.

Der Hintergrund ist so: Das WeChat-Applet hat eine tab-Umschaltseite. Die tab-Umschaltseite hat zwei Inhaltsfelder. view wird erstellt, und beim Wechseln der tab-Seite muss die entsprechende Bildlaufleiste in der scroll-view oben platziert werden. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklungtab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。【相关学习推荐：小程序开发教程】

我们可以看到官方文档描述scroll-view里有一个scroll-into-view属性，该属性的描述如下

scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。

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 (
      <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>
    )
  }
}

如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view]

Wir können die offizielle Dokumentbeschreibung sehenscrollen- Es gibt ein <code>scroll-into-view-Attribut in der Ansicht. Die Beschreibung dieses Attributs lautet wie folgt:

Der Wert von scroll-into-view sollte die ID von a sein bestimmtes Unterelement (die ID darf keine Zahl sein) Anfang). Legen Sie fest, in welche Richtung gescrollt werden kann, und scrollen Sie dann zu dem Element in welche Richtung Dann können wir uns um dieses Attribut kümmern, indem wir einfach einen ID-Wert in scroll-view eingeben. Ein benutzerdefinierter Wert Ich kann erkennen, dass beim Wechseln der Tab die entsprechende Bildlaufleiste des Inhaltsfelds automatisch nach oben scrollt, wie im folgenden Code gezeigt. Den folgenden Code verwende ich Taro Das Programm-Framework zeigt dasselbe wie das native.

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

🎜Platzieren Sie beispielsweise eine Ansichtmit dem ID-Wert von content-0 in der Bildlaufansicht des ersten Tab >, dann sucht <code>scroll-view beim Wechseln der tab-Seite die ID des untergeordneten Elements entsprechend der scroll-into-view code> Attribut, das wir aktiviert haben, um den Effekt zu erzielen, dass sich die Bildlaufleiste automatisch nach oben bewegt In einigen Chat-Schnittstellen müssen Sie beispielsweise die neueste finden. 🎜<pre class="brush:js;toolbar:false;">&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;</pre>🎜Für weitere Programmierkenntnisse besuchen Sie bitte: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man die Scroll-Ansicht entsprechend der angegebenen Position im Miniprogramm scrollen lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!