快捷導(dǎo)航

微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能

更新時(shí)間：2019年12月12日 10:56:17 作者：古蘭精

這篇文章主要介紹了微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在微信小程序中，使用 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)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

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