uniapp点击侧边栏，对应数据滚动定位

使用 <scroll-view>组件。设置scroll-into-view 的值为右侧标题的 id。点击左侧标题时 切换右侧标题 id (scroll-view | uni-app官网

上代码：

<!-- 左侧标题 -->
<scroll-view
    scroll-y="true"
    style="width: 220rpx"
>
    <view class="tags-sort-left">
        <text
            v-for="(ft, index) in leftTitle"
            :key="index"
            @click="changeLeftTitle(index)"
        >
            {{ ft.title }}
        </text>
    </view>
</scroll-view>

<!-- 右侧内容 -->
<scroll-view
    class="tags-sort-right"
    :scroll-into-view="scrollInto" // 子元素id
    scroll-y="true"
    scroll-with-animation="true"
>
    <template
        v-for="(hotTag, index1) in hotTags"
        :key="index1"
    >
        <view
            :id="'item-' + index1" //这里要动态设置id
            class="tags-box"
        >
        ...布局
        </view>
    </template>
</scroll-view>

// 点击左侧标题，
const changeLeftTitle= (index: number) => {
    state.scrollInto = `item-${index}` //改变右侧id，使其滑动
}

最后

以上就是自信手套为你收集整理的uniapp点击侧边栏，对应数据滚动定位的全部内容，希望文章能够帮你解决uniapp点击侧边栏，对应数据滚动定位所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。