效果截圖示例：

• 點擊左側(cè)menu，右側(cè)列表數(shù)據(jù)實現(xiàn)錨點定位
  

1. 思路解析

• 點擊左側(cè)按鈕，更新右側(cè)scroll-view對應(yīng)的scroll-into-view的值，即可實現(xiàn)右側(cè)錨點定位
• 滾動右側(cè)區(qū)域，計算右側(cè)滾動距離 動態(tài)更新左側(cè)scroll-view對應(yīng)的scroll-into-view的值，即可實現(xiàn)左側(cè)錨點定位（暫無需求，先提供思路）

【scroll-view官網(wǎng)】

2. 代碼示例

HTML

<view><!-- 左側(cè)menu --><scroll-view scroll-y="true" :scroll-into-view="category.categoryMenuIntoView"scroll-with-animation="true"><view :id='"category-menu-" + index' v-for="(item, index) in category.coffeeList" :key="item.categoryId" @click="switchCategoryMenu(item,index)">{{ item.categoryName }}		</view></scroll-view><!-- 右側(cè)列表 --><scroll-view scroll-y="true" :scroll-into-view="category.coffeeIntoView" scroll-with-animation="true"><view :id='"category-coffee-" + index' @scroll='coffeeScroll'>{{item.name}}</view></scroll-view></view>

重點：

• scroll-into-view：值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個方向可滾動，則在哪個方向滾動到該元素
• id設(shè)置：唯一值切不能為數(shù)字開頭（后續(xù)需該值賦給scroll-into-view）

JS

// 定義數(shù)據(jù)
const category = reactive({idx: 0,coffeeList: [],categoryMenuIntoView: 'category-menu-0',coffeeIntoView: 'category-coffee-0'})/*** 點擊切換左側(cè)menu*/
const switchCategoryMenu = (item, index) => {if (category.idx == index) return console.log('點擊即為當前選中分類，無需切換邏輯')category.idx = indexcategory.categoryMenuIntoView = `category-menu-${index}`category.coffeeIntoView = `category-coffee-${index}`
}/***  onLoad之后執(zhí)行，預先計算出右側(cè)錨點卡片的范圍*/
const getDistanceToTop = () => {distanceList.value = []; // 清空舊的距離列表const selectorQuery = uni.createSelectorQuery();selectorQuery.selectAll('.coffee-box').boundingClientRect(rects => {console.log('rects.map(rect => rect.top)', rects.map(rect => rect.top))distanceList.value = rects.map(rect => rect.top); // 直接映射為 `top` 值}).exec();
}/***  節(jié)流監(jiān)聽右側(cè)區(qū)域滾動，聯(lián)動左側(cè)menu錨點定位*  根據(jù)滾動出的距離，屬于getDistanceToTop對應(yīng)的哪一個范圍，動態(tài)修改左側(cè)scroll-into-view的值即可*/
const coffeeScroll = throttle((event) => {let scrollTop = event.detail.scrollTop;
}, 200); // 節(jié)流時間 300ms

---

---

如此即可實現(xiàn)錨點定位功能。（滾動監(jiān)聽功能后續(xù)可能會更新）