uni scroll-view 中使用scroll-into-view 滚动到指定位置

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

<scroll-view
      :scroll-top="scrollTop"
      :scroll-into-view="toviews"
      scroll-y
      scroll-with-animation
      :style="{ height: screenHeight + 'px' }"
    >

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

子元素:

 <view
        class="item-essay"
        :id="`s${options.id}`"
        v-for="options in prenatalList"
        :key="options.id"
      >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值