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

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

青灯夜游
青灯夜游앞으로
2021-11-08 10:11:563938검색

이 기사에서는 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>
    )
  }
}

如第一个tabscroll-view里放置一个id值为content-0view,那么在切换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>
🎜예를 들어, 첫 번째 탭scroll-viewcontent-0의 ID 값을 가진 보기를 배치하세요. /code> >, 페이지를 전환할 때 scroll-viewscroll-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제