小程序中如何讓scroll-view按照指定位置滾動

這篇文章主要介紹“小程序中如何讓scroll-view按照指定位置滾動”，在日常操作中，相信很多人在小程序中如何讓scroll-view按照指定位置滾動問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序中如何讓scroll-view按照指定位置滾動”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

背景是這樣的，微信小程序有一個tab切換頁面，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='content-0'>
          <View id='content-0'></View>
          標簽頁一的內容
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={1} >
          <ScrollView scrollY scrollIntoView='content-1'>
          <View id='content-1'></View>
          標簽頁二的內容
          </ScrollView>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={2} >
          <ScrollView scrollY scrollIntoView='content-2'>
          <View id='content-2'></View>
          標簽頁三的內容
          </ScrollView>
        </AtTabsPane>
      </AtTabs>
    )
  }
}

如第一個tab的scroll-view里放置一個id值為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>

到此，關于“小程序中如何讓scroll-view按照指定位置滾動”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！