在小程序中要實現錨點定位，需要使用到組件?scroll-view

點擊查看?scroll-view?組件官網文檔

需要用到的是?scroll-into-view?這條屬性，這條屬性的官網解釋是這樣的：

scroll-into-view?String
值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素

?

于是乎，我們只需要給?scroll-view?內要跳轉的?view?設置上?id，然后給?scroll-into-view?傳入要跳轉的?view?的?id?就行了

*注意：賦值時不能用等號?=?賦值，要使用 this.setData() 賦值，否則重復賦相同的值時不會跳轉

點我查看微信小程序代碼片段 wechatide://minicode/4OI2oNmQ722U

以下是源碼（和代碼片段的一樣）

wxml

<view class="btn_jump"><view class='btn_item' bindtap='jumpTo' data-opt="item0">ToItem0</view><view class='btn_item' bindtap='jumpTo' data-opt="item11">ToItem11</view><view class='btn_item' bindtap='jumpTo' data-opt="item29">ToItem29</view> </view><scroll-view class="jump_list"scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" ><view wx:for="{{30}}" wx:key="{{item}}"id="item{{item}}" class="list_item" >{{item}}</view> </scroll-view>

wxs

Page({data: {},onLoad: function () {},jumpTo: function (e) {// 獲取標簽元素上自定義的 data-opt 屬性的值let target = e.currentTarget.dataset.opt;this.setData({toView: target})} })

wxss

page {height: 100%; } .btn_jump {position: fixed;z-index: 9;top: 30rpx;right: 10rpx; } .btn_jump .btn_item {border: 1rpx solid #aaa;margin-bottom: 30rpx; } .jump_list {position: relative;height: 100%; } .list_item {height: 80rpx; } .list_item:nth-of-type(even) {background: #f8f8f8; }

?

轉載于:https://www.cnblogs.com/yuan9580/p/11344019.html

總結

以上是生活随笔為你收集整理的小程序实现锚点定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。