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

最新推荐文章于 2024-07-19 23:03:01 发布

GotYoung

最新推荐文章于 2024-07-19 23:03:01 发布

阅读量839

点赞数

分类专栏： uniapp 文章标签： uni-app 前端 html

本文链接：https://blog.youkuaiyun.com/GotYoung/article/details/129047284

版权

uniapp 专栏收录该内容

4 篇文章

订阅专栏

该文章介绍如何在uni-app中利用scroll-view组件，通过设置scroll-into-view属性和动态改变子元素id，实现在点击左侧标题时，右侧内容自动滚动到对应的标题位置。changeLeftTitle函数处理点击事件，更新右侧滚动视图的目标id。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 <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，使其滑动
}