swan.pageScrollTo

swan.pageScrollTo

解释：将页面滚动到目标位置（可以设置滚动动画时长）。

方法参数

Object object

object参数说明

属性名	类型	必填	默认值	说明
scrollTop	Number	是		滚动到页面的目标位置（单位 px）
duration	Number	否	300	滚动动画的时长，（单位 ms）
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

示例

扫码体验

请使用百度APP扫码

代码示例1 - 页面滚动到顶部

在开发者工具中预览效果

<view class="container">
  <image class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png"></image>
   <view class="swan-security-padding-bottom flex-button">
        <button type="primary" bindtap="scrollToTop">返回顶部</button>
    </view>
</view>

Page({
    scrollToTop() {
        swan.pageScrollTo({
            scrollTop: 0,
            duration: 300,
            success: res => {
                console.log('pageScrollTo success', res);
            },
            fail: err => {
                console.log('pageScrollTo fail', err);
            }
        });
    }
});

代码示例2 - 页面滚动到底部

在开发者工具中预览效果

<view class="container">
  <image class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png"></image>
   <view class="swan-security-padding-bottom flex-button">
        <button type="primary" bindtap="scrollToBottom">滚动到页面底部</button>
    </view>
</view>


Page({
    scrollToBottom(){
        swan.createSelectorQuery()
        .select(".image")
        .boundingClientRect(function(rect) {
            swan.pageScrollTo({
                scrollTop: rect.bottom,
                duration: 300,
                success: res => {
                    console.log('pageScrollTo success', res);
                },
                fail: err => {
                    console.log('pageScrollTo fail', err);
                }
            });
        })
        .exec();
    }
});