当前位置:   article > 正文

uniapp 滚动到指定元素的位置(锚点)_uni-app 检索文本内容并页面滚动到对应的位置

uni-app 检索文本内容并页面滚动到对应的位置

需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。

最简单有效的方式(直接复制改数据就行)

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

  1. <scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
  2. 你渲染的内容
  3. </scroll-view>

点击事件(位置随便写,根据页面需求)

  1. <p v-for="(item,index) in gameList[current-1].list" :key="index" @tap="filterList(item.name)">
  2. {{item.name}}
  3. </p>

需要滚动到的地方(使用动态id)

<p :id="item.name">{{item.name}}</p>

事件

  1. filterList(id) {
  2. uni.createSelectorQuery().select('#' + id).boundingClientRect(function(rect){
  3. // 使用scrollIntoView方法滚动到目标元素
  4. uni.pageScrollTo({
  5. scrollTop: rect.top - 70,
  6. duration: 300
  7. })
  8. }).exec();
  9. },

 总体思路:

1.使用scroll-view 标签,并配置;

2.点击事件获取想要的id;

3.设置滚动距离,时长

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

闽ICP备14008679号