阅读(3156) 赞(2)

支付宝小程序API 滚动

2017-08-22 19:42:56 更新

my.pageScrollTo

简介

my.pageScrollTo 是滚动到页面的目标位置的 API。

使用限制

  • scrollTop 的优先级比 selector 高。
  • 使用 my.pageScrollTo 跳转小程序顶部时,必须将 scrollTop 值设为大于 0,方可实现跳转。

扫码体验

滚动.jpeg

示例代码

<!-- API-DEMO page/API/page-scroll-to/page-scroll-to.axml-->
<view class="page">
  <view class="page-description">页面滚动 API</view>


  <view class="page-section">
    <view class="page-section-title">
      my.pageScrollTo
    </view>
    <view class="page-section-demo">
      <input type="text" placeholder="key" name="key" value="{{scrollTop}}" onInput="scrollTopChange"></input>
    </view>
    <view class="page-section-btns">
      <view onTap="scrollTo">页面滚动</view>
    </view>
  </view>


  <view style="height:1000px"/>
</view>
// API-DEMO page/API/page-scroll-to/page-scroll-to.js
Page({
  data: {
    scrollTop: 0,
  },
  scrollTopChange(e) {
    this.setData({
      scrollTop: e.detail.value,
    });
  },
  onPageScroll({ scrollTop }) {
    console.log('onPageScroll', scrollTop);
  },
  scrollTo() {
    my.pageScrollTo({
      scrollTop: parseInt(this.data.scrollTop),
            duration: 300,
    });
  },
});

入参

为 Object 类型,属性如下:

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

selector 语法

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