当前位置:   article > 正文

uniapp点击侧边栏,对应数据滚动定位_uni-app scroll-view 到最右侧

uni-app scroll-view 到最右侧

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

上代码:

  1. <!-- 左侧标题 -->
  2. <scroll-view
  3. scroll-y="true"
  4. style="width: 220rpx"
  5. >
  6. <view class="tags-sort-left">
  7. <text
  8. v-for="(ft, index) in leftTitle"
  9. :key="index"
  10. @click="changeLeftTitle(index)"
  11. >
  12. {{ ft.title }}
  13. </text>
  14. </view>
  15. </scroll-view>
  16. <!-- 右侧内容 -->
  17. <scroll-view
  18. class="tags-sort-right"
  19. :scroll-into-view="scrollInto" // 子元素id
  20. scroll-y="true"
  21. scroll-with-animation="true"
  22. >
  23. <template
  24. v-for="(hotTag, index1) in hotTags"
  25. :key="index1"
  26. >
  27. <view
  28. :id="'item-' + index1" //这里要动态设置id
  29. class="tags-box"
  30. >
  31. ...布局
  32. </view>
  33. </template>
  34. </scroll-view>
  35. // 点击左侧标题,
  36. const changeLeftTitle= (index: number) => {
  37. state.scrollInto = `item-${index}` //改变右侧id,使其滑动
  38. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/312509?site
推荐阅读
相关标签
  

闽ICP备14008679号