赞
踩
使用 <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,使其滑动
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。