【小程序】滚动到指定位置

空城皆是旧梦

已于 2023-05-30 09:32:15 修改

阅读量592

点赞数 3

文章标签：小程序

于 2022-07-15 14:51:00 首次发布

本文链接：https://blog.csdn.net/qq_36012563/article/details/125804517

版权

点击按钮滚动到页面内的指定位置。

wxml

<view class="btn" catchtap="scrollToElement">去报名</view>
<view class="box" id="inputArea">报名填写内容</view>

  /**
   * 滚动到指定位置处
   */
  scrollToElement () {
    var query = wx.createSelectorQuery(); // 创建节点查询器
    query.selectViewport().scrollOffset();
    query.select('#inputArea').boundingClientRect(); // 选择id为inputAreat的节点并查询的它布局位置
    query.exec(function(res) { //执行请求
      wx.pageScrollTo({
        scrollTop: res[0].scrollTop + res[1].top,//滚动到页面节点的上边界坐标
        duration: 300 // 滚动动画的时长
      });
    })
  },