微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能
在微信小程序中，使用 scroll-view 實(shí)現(xiàn)長(zhǎng)頁(yè)面的標(biāo)記跳轉(zhuǎn)，官方文檔中沒(méi)有例子演示，錨點(diǎn)標(biāo)記主要是使用<scroll-view> 的 scroll-into-view 屬性。
實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)主要以下幾點(diǎn)：
1、最外層容器使用 scroll-view
2、賦值scroll-into-view，如：<scroll-view scroll-into-view="{{toView}}">
3、設(shè)置 scroll-view 滾動(dòng)方向 scroll-y="true"
4、跳轉(zhuǎn)到的位置使用 id (定位)，如：<view id="mark1">
<view class="list">
<view bindtap=‘jumpTo‘ data-opt="list0">list0</view>
<view bindtap=‘jumpTo‘ data-opt="list11">list11</view>
<view bindtap=‘jumpTo‘ data-opt="list29">list29</view>
</view>
<scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
<view wx:for="{{list}}" id="{{item}}" class="test">
{{item}}
</view>
</scroll-view>
data: {
list: ["list0", "list1", "list2"],
toView: ‘‘
},
jumpTo: function (e) {
// 獲取標(biāo)簽元素上自定義的 data-opt 屬性的值
let target = e.currentTarget.dataset.opt;
this.setData({
toView: target
})
},
總結(jié)
以上所述是小編給大家介紹的微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位功能的方法實(shí)例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)跳轉(zhuǎn)
- 微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)到錨點(diǎn)左側(cè)導(dǎo)航欄點(diǎn)餐功能(點(diǎn)擊種類,滾動(dòng)到錨點(diǎn))
- 微信小程序scroll-view錨點(diǎn)鏈接滾動(dòng)跳轉(zhuǎn)功能
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)功能
- 小程序?qū)崿F(xiàn)錨點(diǎn)滑動(dòng)效果
- 微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
- 微信小程序?qū)崿F(xiàn)錨點(diǎn)定位樓層跳躍的實(shí)例
- 微信小程序商城分類滾動(dòng)列表錨點(diǎn)的項(xiàng)目實(shí)踐
相關(guān)文章
javascript 原型模式實(shí)現(xiàn)OOP的再研究
目前網(wǎng)絡(luò)上有關(guān)javascript實(shí)現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下2009-04-04
JavaScript中object和Object的區(qū)別(詳解)
下面小編就為大家?guī)?lái)一篇JavaScript中object和Object的區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
如果需要在程序中獲取當(dāng)前用戶的IP,通常手段都是需要使用服務(wù)器,但現(xiàn)在借助WebRTC的強(qiáng)大功能,我們可以直接在瀏覽器客戶端獲取用戶IP,所以本文小編將給大家介紹一下如何在在瀏覽器中使用WebRTC獲取用戶IP地址,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了微信小程序靜默登錄的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
js return返回多個(gè)值,通過(guò)對(duì)象的屬性訪問(wèn)方法
下面小編就為大家?guī)?lái)一篇js return返回多個(gè)值,通過(guò)對(duì)象的屬性訪問(wèn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要分享ES6?20個(gè)經(jīng)常使用技巧，作用是使JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言，具體使用詳情需要的小伙伴可以參考下面文章內(nèi)容2022-06-06
List Installed Hot Fixes...2007-06-06
javascript創(chuàng)建函數(shù)的20種方式匯總
這篇文章主要介紹了javascript創(chuàng)建函數(shù)的20種方式匯總的相關(guān)資料,需要的朋友可以參考下2015-06-06
ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法示例
這篇文章主要介紹了ES6新特性之解構(gòu)、參數(shù)、模塊和記號(hào)用法,結(jié)合實(shí)例形式分析了解構(gòu)、參數(shù)、模塊和記號(hào)的功能、用法及相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2017-04-04
javaScript 判斷字符串是否為數(shù)字的簡(jiǎn)單方法
javascript在通過(guò)parseIn或parseFloat將字符串轉(zhuǎn)化為數(shù)字的過(guò)程中，如果字符串中包含有非數(shù)字，那么將會(huì)返回NaN，參考下面代碼2009-07-07