微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能
更新時間：2019年12月12日 10:56:17 作者：古蘭精
這篇文章主要介紹了微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
在微信小程序中，使用 scroll-view 實現(xiàn)長頁面的標記跳轉(zhuǎn)，官方文檔中沒有例子演示，錨點標記主要是使用<scroll-view> 的 scroll-into-view 屬性。
實現(xiàn)錨點跳轉(zhuǎn)主要以下幾點：
1、最外層容器使用 scroll-view
2、賦值scroll-into-view，如：<scroll-view scroll-into-view="{{toView}}">
3、設置 scroll-view 滾動方向 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) {
// 獲取標簽元素上自定義的 data-opt 屬性的值
let target = e.currentTarget.dataset.opt;
this.setData({
toView: target
})
},
總結(jié)
以上所述是小編給大家介紹的微信小程序 scroll-view 實現(xiàn)錨點跳轉(zhuǎn)功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
javascript 原型模式實現(xiàn)OOP的再研究
目前網(wǎng)絡上有關(guān)javascript實現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下2009-04-04
JavaScript中object和Object的區(qū)別(詳解)
下面小編就為大家?guī)硪黄狫avaScript中object和Object的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
如果需要在程序中獲取當前用戶的IP,通常手段都是需要使用服務器,但現(xiàn)在借助WebRTC的強大功能,我們可以直接在瀏覽器客戶端獲取用戶IP,所以本文小編將給大家介紹一下如何在在瀏覽器中使用WebRTC獲取用戶IP地址,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了微信小程序靜默登錄的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
下面小編就為大家?guī)硪黄猨s return返回多個值,通過對象的屬性訪問方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要分享ES6?20個經(jīng)常使用技巧，作用是使JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言，具體使用詳情需要的小伙伴可以參考下面文章內(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ù)、模塊和記號用法示例
這篇文章主要介紹了ES6新特性之解構(gòu)、參數(shù)、模塊和記號用法,結(jié)合實例形式分析了解構(gòu)、參數(shù)、模塊和記號的功能、用法及相關(guān)使用注意事項,需要的朋友可以參考下2017-04-04
javaScript 判斷字符串是否為數(shù)字的簡單方法
javascript在通過parseIn或parseFloat將字符串轉(zhuǎn)化為數(shù)字的過程中，如果字符串中包含有非數(shù)字，那么將會返回NaN，參考下面代碼2009-07-07