my.pageScrollTo

2022-07-29 06:32

Scroll to the target position on the page
Note:
• The scrollTop has a higher priority than selector.
• When the my.pageScrollTo is used to jump to the top of the Mini Program, the scrollTop value must be set as a number greater than 0 to make jump possible.

Sample Code

copy

    <!-- API-DEMO page/API/page-scroll-to/page-scroll-to.axml-->
    <view class="page">
      <view class="page-description">Page scroll 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">Page scroll </view>
        </view>
      </view>
    
      <view style="height:1000px"/>
    </view>

copy

    // 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,
        });
      },
    });

Parameters

Object type with the following attributes:

Attributes	Type	Default	Mandatory	Description	Minimum version
scrollTop	Number	-	No	Scroll to the target position on the page, in px When the my.pageScrollTo is used to jump to the top of the Mini Program, the scrollTop value must be set as a number greater than 0 to make jump possible.	-
duration	Number	0	No	Duration of scroll animation, in ms	1.20.0
selector	string	-	No	Selector	1.20.0
success	function	-	No	Callback function for interface call success	-
fail	function	-	No	Callback function for interface call failure	-
complete	function	-	No	Callback function for interface call completion (to be executed for both call success and failure)	-

Selector Syntax

When the selector parameter is transfered, the framework executes document.querySelector(selector) to select the target node.