미니프로그램에서 지정된 위치에 따라 스크롤뷰 스크롤을 만드는 방법에 대한 간략한 분석

이 기사에서는 WeChat 애플릿의 지정된 위치에 따라 스크롤 보기 스크롤을 만드는 방법을 소개합니다. 추가적인 js 스크립트를 작성하지 않고도 훌륭한 경험을 얻을 수 있기를 바랍니다.

배경은 다음과 같습니다. WeChat 애플릿에는 탭 전환 페이지가 있습니다. 스크롤-을 사용합니다. view가 생성된 후 탭 페이지 전환 시 scroll-view의 해당 스크롤 막대가 맨 위에 배치되어야 합니다. [관련 학습 추천 : Mini Program Development Tutorialtab切换页面，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]

공식 문서 설명을 보실 수 있습니다스크롤- view에는 scroll-into-view 속성이 있습니다. 이 속성에 대한 설명은 다음과 같습니다

scroll-into-view의 값은 특정 하위 요소(ID는 숫자일 수 없음)로 시작됩니다. 스크롤할 수 있는 방향을 설정한 다음 해당 방향으로 요소를 스크롤하세요 그런 다음 이 속성에 대해 소란을 피울 수 있습니다. scroll-view에 id 값을 입력하면 됩니다. 맞춤 값 다음 코드에서 볼 수 있듯이 탭을 전환하면 해당 콘텐츠 상자 스크롤 막대가 자동으로 맨 위로 스크롤된다는 것을 알 수 있습니다. 다음 코드는 Taro를 사용하는 것입니다. 프로그램 프레임워크는 기본 프레임워크와 동일하게 보여줍니다.

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

🎜예를 들어, 첫 번째 탭<의 <code>scroll-view에 content-0의 ID 값을 가진 보기</code를 배치하세요. /code> >, <code>탭 페이지를 전환할 때 scroll-view는 scroll-into-view에 따라 하위 요소의 ID를 찾습니다. code> 속성을 ​​on으로 설정하면 스크롤 막대가 자동으로 위로 이동하는 효과를 얻을 수 있습니다. 🎜

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

🎜마찬가지로 스크롤 막대가 가장 낮은 위치로 스크롤해야 하는 경우 해당 하위 요소 ID를 가장 낮은 위치에 배치하면 됩니다. 예를 들어 일부 채팅 인터페이스에서는 최신 버전을 찾아야 합니다. 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 미니프로그램에서 지정된 위치에 따라 스크롤뷰 스크롤을 만드는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!