支付宝小程序API 滚动

2020-09-14 15:28 更新

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) 以选取目标节点。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号