vue3 + uniapp在弹窗实现点击跳指定高度元素

vue3 + uniapp在弹窗实现点击跳指定高度元素

问题: 可能有伙伴发现在弹窗内使用uni.pageScrollTo()不生效,因为弹窗通常是一个浮动层，而不是整个页面.

至此提出使用: scroll-view标签的scroll-into-view属性,类似html锚点

<scroll-view scroll-y="true" class="scroll-Y" ref="contentRef " :scroll-into-view="toViewid" scroll-with-animation="true">
    <view id='onto'>点到这里</view>
</scroll-view>
<button @tap="goto">点我跳到onto</button>

注意事项:

1. scroll-view要设置高度

   .scroll-Y{
    height:5000
   }
   

2. scroll-with-animation的动画属性要开启 ‘scroll-with-animation=“true”’

3. 定义toViewid

   const  toViewid  = ref(null)//接受的是id字符串
   
   //点击跳转
   const goto= ()=>{
       toViewid.value = 'onto'
   }