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

86 阅读 0 评论 57 点赞

我是靠谱客的博主自信手套，这篇文章主要介绍uniapp点击侧边栏，对应数据滚动定位，现在分享给大家，希望可以做个参考。

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

上代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 左侧标题 -->
<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，使其滑动
}