A brief analysis of how to make scroll-view scroll according to the specified position in the mini program

This article will introduce to you how to make the scroll-view scroll according to the specified position in the WeChat applet. You can get an excellent experience without writing additional js scripts. I hope it will be helpful to everyone!

The background is like this. The WeChat applet has a tab switching page, and the tab switching page has two content boxes. I use scroll-view to make it, and then when switching the tab page, the corresponding scroll bar in scroll-view needs to be on top. [Related learning recommendations: 小program development tutorial]

We can see that there is a scroll-into-view# in the official document description scroll-view ##Attribute, the description of this attribute is as follows

The value of scroll-into-view should be a certain sub-element id (the id cannot start with a number). Set which direction can be scrolled, then scroll to the element in which direction

Then we can make a fuss about this attribute, just put an id value in

scroll-view By setting a custom value, when switching tab, the corresponding content box scroll bars will automatically scroll to the top, as shown in the following code. The following code is what I use Taro The program framework demonstrates the same as the native one.

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

For example, place a

view## with the ID value content-0 in the scroll-view of the first tab #, then when switching the tab page, scroll-view will be positioned on the id of the child element according to the scroll-into-view attribute we set, and reach The effect of the scroll bar automatically moving to the top<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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><div class="contentsignin">Copy after login</div></div>Similarly, if you need the scroll bar to scroll to the lowest position, just put the corresponding sub-element ID to the lowest position. For example, in some chat interfaces, you need to locate the latest one. Article

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

For more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of A brief analysis of how to make scroll-view scroll according to the specified position in the mini program. For more information, please follow other related articles on the PHP Chinese website!