微信小程序 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、設(shè)置 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)文章
斐波那契是自然界與社會中存在的一種數(shù)學規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
Layer UI表格列日期格式化及取消自動填充日期的實現(xiàn)方法
這篇文章主要介紹了Layer UI表格列日期格式化及取消自動填充日期的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
JavaScript利用img實現(xiàn)前端頁面埋點功能
做數(shù)據(jù)分析的時候需要獲取足量的有效數(shù)據(jù)，這個時候就需要我們在前端頁面埋點。如何來實現(xiàn)一個前端埋點功能，本文就帶你上手試試2022-06-06
分步解析JavaScript實現(xiàn)tab選項卡自動切換功能
這篇文章主要分步解析JavaScript實現(xiàn)tab選項卡自動切換功能代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
原生js如何實現(xiàn)call,apply以及bind
這篇文章主要介紹了原生js實現(xiàn)call,apply以及bind，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了使用原生js編寫一個簡單的框選功能方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07
這篇文章主要給大家介紹了關(guān)于js陀螺儀的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了e2e測試之cypress的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
近日，在做項目中，需要做到滾動條滑到某個位置時，才能顯示動畫，網(wǎng)上查詢到有個wow.js可以達到要求，現(xiàn)在把使用方法做如下總結(jié)，需要的朋友參考下吧2017-09-09