要在 UniApp 中实现多个元素的锚点，结合 id 属性和 scroll-into-view 来实现锚点跳转，同时根据滚动位置来标记当前锚点。<u-col span="3"> <scroll-view scroll-y="true" class="sh_aside"> <view class="aside-item flex-fsfs" v-for="(item,i) in categories" :key="i" @tap="selectCategory(item)"> <text :class="['nomal-line',item.code==cateVal? 'active-line':'']"></text> <text :class="['nomal-desc',item.code==cateVal? 'active-desc':'']">{{item.name}}</text> </view> <view class="empty" style="padding-top: 20vh;" v-if="categories.length == 0"> 暂无分类 </view> </scroll-view> </u-col> <u-col span="9" > <view class="sh_main"> <view class="drop-box"> <u-dropdown> <u-dropdown-item active-color="#3296FA" inactive-color="#666666" height="500" :options="nutrients" v-model="nutVal" :title="crtNutrient.label" @change="dropdownChange"></u-dropdown-item> </u-dropdown> </view> <scroll-view scroll-y="true" class="sh_artcle" :scroll-into-view="crtView" > <view class="part" v-for="item,index in ingredientList" :key="index" :id="item.customId"> <view class="part-title"> {{item.name}} </view> <view class="flex-fsc part-list" v-for="sc,i in item.list" :key="i"> <image src="/static/images/manbing/recipes_sc_mrbj.png" mode="aspectFill" style="width: 83rpx;height: 83rpx;"></image> <view class=""> <view class=""> {{sc.name}} </view> <view class="part-text"> 营养元素 </view> </view> </view> <view class="empty" v-if="item.list.length == 0"> 暂无数据 </view> </view> <view class="empty" style="padding-top: 20vh;" v-if="ingredientList.length == 0"> 暂无数据 </view> </scroll-view> </view> </u-col> </u-row>

### 实现多元素锚点跳转及动态更新当前激活的锚点 在 UniApp 中，`scroll-view` 的 `scroll-into-view` 属性可以用来实现锚点跳转功能。通过绑定目标节点的唯一标识符（通常是 ID），可以让页面滚动到指定的位置[^2]。 以下是具体实现方式： #### 锚点跳转部分 为了实现点击某个按钮或链接后滚动至对应的目标区域，可以在 HTML 结构中定义多个子组件，并为它们设置唯一的标识符作为其 `id` 值。接着，在触发事件时修改 `scroll-into-view` 绑定的数据变量即可完成跳转操作。 ```html <template> <view class="container"> <!-- 导航栏 --> <view class="nav-bar"> <button v-for="(item, index) in navList" :key="index" @click="handleScrollTo(item.id)"> {{ item.name }} </button> </view> <!-- 主体内容 --> <scroll-view style="height: 100vh;" scroll-y :scroll-into-view="currentId" @scroll="handleScroll" > <view v-for="(section, idx) in sections" :key="idx" :id="'anchor-' + section.id"> <text>{{ section.title }}</text> </view> </scroll-view> </view> </template> ``` #### 动态更新当前激活的锚点 当用户手动拖拽或者程序自动滚屏时，可以通过监听 `@scroll` 事件来获取当前可视区域内最接近顶部的内容块，并将其对应的导航项设为高亮状态。 ```javascript <script> export default { data() { return { currentId: '', // 当前选中的ID navList: [ { name: 'Section A', id: 'a' }, { name: 'Section B', id: 'b' }, { name: 'Section C', id: 'c' } ], sections: [ { title: 'This is Section A', id: 'a' }, { title: 'This is Section B', id: 'b' }, { title: 'This is Section C', id: 'c' } ] }; }, methods: { handleScroll(e) { const query = uni.createSelectorQuery().in(this); this.sections.forEach((section) => { query.select(`#anchor-${section.id}`).boundingClientRect(); }); query.exec((res) => { let scrollTop = e.detail.scrollTop; res.forEach((rect, i) => { if (scrollTop >= rect.top && scrollTop < rect.bottom) { this.currentId = `anchor-${this.sections[i].id}`; } }); }); }, handleScrollTo(id) { this.currentId = `anchor-${id}`; // 设置要滚动到的目标ID } } }; </script> ``` 上述代码片段展示了如何利用 Vue.js 数据驱动视图的特点以及原生 API 来达成所需的效果。 #### 注意事项 - 需确保每个需要被当作锚定点的部分都有独一无二的 `id`。 - 如果项目较为复杂，则可能还需要考虑性能优化问题，比如减少不必要的 DOM 查询次数等。 ```css <style scoped> .container { display: flex; flex-direction: column; } .nav-bar button.active { background-color: blueviolet; } </style> ```