이 기사에서는 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='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
]
공식 문서 설명을 보실 수 있습니다스크롤- view
에는 scroll-into-view
속성이 있습니다. 이 속성에 대한 설명은 다음과 같습니다
scroll-into-view의 값은 특정 하위 요소(ID는 숫자일 수 없음)로 시작됩니다. 스크롤할 수 있는 방향을 설정한 다음 해당 방향으로 요소를 스크롤하세요 그런 다음 이 속성에 대해 소란을 피울 수 있습니다. scroll-view
에 id 값을 입력하면 됩니다. 맞춤 값 다음 코드에서 볼 수 있듯이 탭
을 전환하면 해당 콘텐츠 상자 스크롤 막대가 자동으로 맨 위로 스크롤된다는 것을 알 수 있습니다. 다음 코드는 Taro
를 사용하는 것입니다. 프로그램 프레임워크는 기본 프레임워크와 동일하게 보여줍니다.
<AtTabsPane current={this.state.current} index={0} > <ScrollView scrollY scrollIntoView='content-0'> <View id='content-0'></View> 标签页一的内容 </ScrollView> </AtTabsPane>🎜예를 들어, 첫 번째
탭scroll-view
에 content-0
의 ID 값을 가진 보기
를 배치하세요. /code> >, 탭
페이지를 전환할 때 scroll-view
는 scroll-into-view
에 따라 하위 요소의 ID를 찾습니다. code> 속성을 on으로 설정하면 스크롤 막대가 자동으로 위로 이동하는 효과를 얻을 수 있습니다. 🎜<AtTabsPane current={this.state.current} index={0} > <ScrollView scrollY scrollIntoView='content-0'> 标签页一的内容 <View id='content-0'></View> </ScrollView> </AtTabsPane>🎜마찬가지로 스크롤 막대가 가장 낮은 위치로 스크롤해야 하는 경우 해당 하위 요소 ID를 가장 낮은 위치에 배치하면 됩니다. 예를 들어 일부 채팅 인터페이스에서는 최신 버전을 찾아야 합니다. 🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜
위 내용은 미니프로그램에서 지정된 위치에 따라 스크롤뷰 스크롤을 만드는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!