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

站在用戶的角度思考問題，與客戶深入溝通，找到庫爾勒網站設計與庫爾勒網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網站、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、空間域名、雅安服務器托管、企業(yè)郵箱。業(yè)務覆蓋庫爾勒地區(qū)。

背景是這樣的，微信小程序有一個tab切換頁面，tab切換頁面有兩個內容框，我是使用scroll-view進行制作，然后在切換tab頁面時，相應的scroll-view里的滾動條需要置頂處理。

我們可以看到官方文檔描述scroll-view里有一個scroll-into-view屬性，該屬性的描述如下

scroll-into-view的值應為某子元素id（id不能以數(shù)字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素

那么我們可以在這個屬性里大作文章，只要在scroll-view里放置一個id值為設置的一個自定義值就可以實現(xiàn)切換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會根據(jù)我們設置的scroll-into-view屬性定位到子元素的id上，到達滾動條自動置頂?shù)男Ч?/p>

<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按照指定位置滾動”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享名稱：小程序中如何讓scroll-view按照指定位置滾動
文章位置：http://chinadenli.net/article32/ipgcpc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供移動網站建設、網站設計公司、商城網站、小程序開發(fā)、品牌網站制作、外貿網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)