当前位置:   article > 正文

uniapp 页面滚动到指定位置的方法_uniapp 滚动到指定位置

uniapp 滚动到指定位置
方法一:使用uni.pageScrollTo 使页面纵向滚到到指定位置
  1. uni.pageScrollTo({
  2. scrollTop: 0,
  3. duration: 300
  4. });

如果滚动无效,可以尝试将代码放在settimeOut(异步),或者nextTick(微任务)。若仍滚动无效,可以将html为外层的盒子高度设置为 height:auto!important;

方法二:使用<scroll-view>标签,可以将页面横向(或纵向)滚动到指定位置

html

  1. <scroll-view scroll-x="true" class="scrollSku" :scroll-left="scrollLeft">
  2. <view v-for="(item,index) in data" :key="item.id" :id="'target'+index">
  3. </view>
  4. </scroll-view>
  1. changeScroll(index) {
  2. uni.createSelectorQuery().in(this).select('#target' + index)
  3. .boundingClientRect(res => {
  4. let left = res.left < 0 ? res.left + 20 : res.left - 20
  5. this.scrollLeft = left; // 设置滚动条距离左侧的距离
  6. }).exec();
  7. },

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

闽ICP备14008679号