Une brève analyse de la façon de faire défiler la vue en fonction de la position spécifiée dans le mini programme

Cet article vous expliquera comment faire défiler la vue en fonction de la position spécifiée dans l'applet WeChat. Vous pouvez obtenir une excellente expérience sans écrire de scripts js supplémentaires. J'espère que cela sera utile à tout le monde !

L'applet WeChat a une page de changement de onglet. La page de changement de onglet a deux zones de contenu. view est créée, puis lors du changement de page onglet, la barre de défilement correspondante dans la scroll-view doit être placée en haut. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmestab切换页面，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]

Nous pouvons voir la description officielle du documentfaites défiler- Il y a un attribut <code>scroll-into-view dans la vue. La description de cet attribut est la suivante

La valeur de scroll-into-view doit être l'identifiant d'un. certain sous-élément (l'identifiant ne peut pas être un nombre) commençant). Définissez la direction dans laquelle le défilement peut être effectué, puis faites défiler jusqu'à l'élément dans quelle direction Ensuite, nous pouvons faire toute une histoire à propos de cet attribut, il suffit de mettre une valeur d'identifiant dans scroll-view Une valeur personnalisée Je peux réaliser que lors du changement de onglet, la barre de défilement de la zone de contenu correspondante défilera automatiquement vers le haut, comme indiqué dans le code suivant. Le code suivant est ce que j'utilise Taro Le. Le cadre du programme démontre la même chose que celui natif.

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

🎜Par exemple, placez une viewavec la valeur d'identifiant content-0 dans la scroll-view du premier onglet >, puis lors du changement de page <code>onglet, scroll-view localisera l'identifiant de l'élément enfant en fonction du scroll-into-view code> attribut que nous avons activé, pour obtenir l'effet de déplacement automatique de la barre de défilement vers le haut 🎜<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>🎜De même, si vous avez besoin que la barre de défilement défile jusqu'à la position la plus basse, placez simplement l'identifiant du sous-élément correspondant au plus bas. position. Par exemple, dans certaines interfaces de chat, vous devez localiser la dernière 🎜rrreee🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!