效果截圖示例：

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

1. 思路解析

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

【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>

重點(diǎn)：

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

JS

// 定義數(shù)據(jù)
const category = reactive({idx: 0,coffeeList: [],categoryMenuIntoView: 'category-menu-0',coffeeIntoView: 'category-coffee-0'})/*** 點(diǎn)擊切換左側(cè)menu*/
const switchCategoryMenu = (item, index) => {if (category.idx == index) return console.log('點(diǎn)擊即為當(dāng)前選中分類，無需切換邏輯')category.idx = indexcategory.categoryMenuIntoView = `category-menu-${index}`category.coffeeIntoView = `category-coffee-${index}`
}/***  onLoad之后執(zhí)行，預(yù)先計(jì)算出右側(cè)錨點(diǎn)卡片的范圍*/
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ū)域滾動(dòng)，聯(lián)動(dòng)左側(cè)menu錨點(diǎn)定位*  根據(jù)滾動(dòng)出的距離，屬于getDistanceToTop對(duì)應(yīng)的哪一個(gè)范圍，動(dòng)態(tài)修改左側(cè)scroll-into-view的值即可*/
const coffeeScroll = throttle((event) => {let scrollTop = event.detail.scrollTop;
}, 200); // 節(jié)流時(shí)間 300ms

---

---

如此即可實(shí)現(xiàn)錨點(diǎn)定位功能。（滾動(dòng)監(jiān)聽功能后續(xù)可能會(huì)更新）