当前位置:   article > 正文

uni scroll-view 中使用scroll-into-view 滚动到指定位置_scrollview 使用 scrollintoview 固定滚到第9个元素

scrollview 使用 scrollintoview 固定滚到第9个元素

1.使用  scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string)

  1. <scroll-view
  2. :scroll-top="scrollTop"
  3. :scroll-into-view="toviews"
  4. scroll-y
  5. scroll-with-animation
  6. :style="{ height: screenHeight + 'px' }"
  7. >

2.scroll-into-view的值为子元素的id,不能以数字开头

子元素:

  1. <view
  2. class="item-essay"
  3. :id="`s${options.id}`"
  4. v-for="options in prenatalList"
  5. :key="options.id"
  6. >

3.遇到的问题

  1. 数据是否准确:确保 scroll-into-view 中的值确实存在于 scroll-view 内,以及其格式是否正确。我使用了 `s${options.id}`,这个值是根据 options.id 动态生成的。确保这个值是唯一的,并且与 scroll-view 内的某个子元素的 id 匹配。

  2. 生命周期问题scroll-viewscroll-into-view 属性需要在 scroll-view 组件已经渲染完毕后才会生效。确保在页面或组件的生命周期中设置 scroll-into-view 属性时,scroll-view 已经被渲染出来了。所以就需要等scroll-view中的数据prenatalList 加载完成再设置 toviews的值

  3. 异步加载问题:如果 scroll-view 或子元素是在异步加载数据后添加到页面的,确保在数据加载完成后设置 scroll-into-view 属性。可以使用异步settimeout或者nexttick

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

闽ICP备14008679号