全部产品

滚动

更新时间:2020-07-07 19:42:04

my.pageScrollTo

该接口用于滚动到页面的目标位置。

说明
  • scrollTop 的优先级比 selector 高。
  • 使用 my.pageScrollTo 跳转小程序顶部时,必须将 scrollTop 值设为大于 0,方可实现跳转。
  • mPaaS 10.1.32 及以上版本支持该接口。

参数说明

属性 类型 默认值 必填 描述 最低版本
scrollTop Number - 滚动到页面的目标位置,单位 px。使用 my.pageScrollTo 跳转小程序顶部时,必须将 scrollTop 值设为大于 0,方可实现跳转。 -
duration Number 0 滚动动画的时长,单位 ms。 1.20.0
selector String - 选择器。 1.20.0
success Function - 接口调用成功的回调函数。 -
fail Function - 接口调用失败的回调函数。 -
complete Function - 接口调用结束的回调函数(调用成功、失败都会执行)。 -

selector 语法

当传入 selector 参数,框架会执行 document.querySelector(selector) 以选取目标节点。

代码示例

  1. <!-- API-DEMO page/API/page-scroll-to/page-scroll-to.axml-->
  2. <view class="page">
  3. <view class="page-description">页面滚动 API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">
  6. my.pageScrollTo
  7. </view>
  8. <view class="page-section-demo">
  9. <input type="text" placeholder="key" name="key" value="{{scrollTop}}" onInput="scrollTopChange"></input>
  10. </view>
  11. <view class="page-section-btns">
  12. <view onTap="scrollTo">页面滚动</view>
  13. </view>
  14. </view>
  15. <view style="height:1000px"/>
  16. </view>
  1. // API-DEMO page/API/page-scroll-to/page-scroll-to.js
  2. Page({
  3. data: {
  4. scrollTop: 0,
  5. },
  6. scrollTopChange(e) {
  7. this.setData({
  8. scrollTop: e.detail.value,
  9. });
  10. },
  11. onPageScroll({ scrollTop }) {
  12. console.log('onPageScroll', scrollTop);
  13. },
  14. scrollTo() {
  15. my.pageScrollTo({
  16. scrollTop: parseInt(this.data.scrollTop),
  17. duration: 300,
  18. });
  19. },
  20. });