上一章我們利用scroll-view組件的scroll-into-view屬性實(shí)現(xiàn)了類似錨鏈接的功能。除了利用屬性外,scroll-view組件還提供了一個(gè)scrollTo方法,使頁面滾動(dòng)到指定位置??膳渲脜?shù)如下:
可以看到參數(shù)view通過把值設(shè)置為某子元素id的方法跳轉(zhuǎn)對(duì)應(yīng)位置,實(shí)現(xiàn)思路與scroll-into-view屬性是類似的。
我們需要通過document.getElementById獲取到本頁的scroll-view元素。當(dāng)點(diǎn)擊右側(cè)首字母時(shí),將子元素id傳給scrollTo方法的view參數(shù)。
這樣便可以成功實(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,如圖:
可以按照自己所需來選擇不同的實(shí)現(xiàn)方法。
關(guān)鍵詞: