久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

09
2023/09

YonBuider之利用scroll-view組件實(shí)現(xiàn)錨鏈接(下)

發(fā)布時(shí)間:2023-09-09 17:49:18
發(fā)布者:MaiMai
瀏覽量:
0

上一章我們利用scroll-view組件的scroll-into-view屬性實(shí)現(xiàn)了類似錨鏈接的功能。除了利用屬性外,scroll-view組件還提供了一個(gè)scrollTo方法,使頁面滾動(dòng)到指定位置??膳渲脜?shù)如下:

scrollTo方法的配置參數(shù)

可以看到參數(shù)view通過把值設(shè)置為某子元素id的方法跳轉(zhuǎn)對(duì)應(yīng)位置,實(shí)現(xiàn)思路與scroll-into-view屬性是類似的。

DOM結(jié)構(gòu)

DOM結(jié)構(gòu)

我們需要通過document.getElementById獲取到本頁的scroll-view元素。當(dāng)點(diǎn)擊右側(cè)首字母時(shí),將子元素id傳給scrollTo方法的view參數(shù)。

方法實(shí)現(xiàn)

這樣便可以成功實(shí)現(xiàn)頁面位置的跳轉(zhuǎn)了。

scroll-into-view屬性和scrollTo方法都能夠?qū)崿F(xiàn)類似錨鏈接的頁面位置跳轉(zhuǎn),區(qū)別就是使用scroll-into-view屬性是直接跳轉(zhuǎn),而使用scrollTo方法會(huì)自帶一個(gè)滾動(dòng)的效果,可以通過animated參數(shù)來設(shè)置滾動(dòng)是否帶有動(dòng)畫,默認(rèn)為true,如圖:

效果圖1

效果圖2

可以按照自己所需來選擇不同的實(shí)現(xiàn)方法。


關(guān)鍵詞:
返回列表