這篇文章主要介紹“小程序中如何讓scroll-view按照指定位置滾動”,在日常操作中,相信很多人在小程序中如何讓scroll-view按照指定位置滾動問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”小程序中如何讓scroll-view按照指定位置滾動”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
站在用戶的角度思考問題,與客戶深入溝通,找到庫爾勒網(wǎng)站設(shè)計(jì)與庫爾勒網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋庫爾勒地區(qū)。
背景是這樣的,微信小程序有一個(gè)tab
切換頁面,tab
切換頁面有兩個(gè)內(nèi)容框,我是使用scroll-view
進(jìn)行制作,然后在切換tab
頁面時(shí),相應(yīng)的scroll-view
里的滾動條需要置頂處理。
我們可以看到官方文檔描述scroll-view
里有一個(gè)scroll-into-view
屬性,該屬性的描述如下
scroll-into-view的值應(yīng)為某子元素id(id不能以數(shù)字開頭)。設(shè)置哪個(gè)方向可滾動,則在哪個(gè)方向滾動到該元素
那么我們可以在這個(gè)屬性里大作文章,只要在scroll-view
里放置一個(gè)id值為設(shè)置的一個(gè)自定義值就可以實(shí)現(xiàn)切換tab
時(shí),對應(yīng)的內(nèi)容框滾動條都自動滾到頂部,如下面代碼所示,下面代碼是我使用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: '標(biāo)簽第一頁' }, { title: '標(biāo)簽第二頁' }, { title: '標(biāo)簽第三頁' }] 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> 標(biāo)簽頁一的內(nèi)容 </ScrollView> </AtTabsPane> <AtTabsPane current={this.state.current} index={1} > <ScrollView scrollY scrollIntoView='content-1'> <View id='content-1'></View> 標(biāo)簽頁二的內(nèi)容 </ScrollView> </AtTabsPane> <AtTabsPane current={this.state.current} index={2} > <ScrollView scrollY scrollIntoView='content-2'> <View id='content-2'></View> 標(biāo)簽頁三的內(nèi)容 </ScrollView> </AtTabsPane> </AtTabs> ) } }
如第一個(gè)tab
的scroll-view
里放置一個(gè)id值為content-0
的view
,那么在切換tab
頁時(shí),scroll-view
會根據(jù)我們設(shè)置的scroll-into-view
屬性定位到子元素的id上,到達(dá)滾動條自動置頂?shù)男Ч?/p>
<AtTabsPane current={this.state.current} index={0} > <ScrollView scrollY scrollIntoView='content-0'> <View id='content-0'></View> 標(biāo)簽頁一的內(nèi)容 </ScrollView> </AtTabsPane>
同理的,假如需要滾動條滾到最低下,把相應(yīng)的子元素id放到最低下即可,例如某些聊天界面,需要定位到最新那條
<AtTabsPane current={this.state.current} index={0} > <ScrollView scrollY scrollIntoView='content-0'> 標(biāo)簽頁一的內(nèi)容 <View id='content-0'></View> </ScrollView> </AtTabsPane>
到此,關(guān)于“小程序中如何讓scroll-view按照指定位置滾動”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
分享名稱:小程序中如何讓scroll-view按照指定位置滾動
文章位置:http://muchs.cn/article32/ipgcpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、小程序開發(fā)、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)