百度智能小程序 将页面滚动到目标位置

swan.pageScrollTo

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

方法参数

Object object

object 参数说明

示例

代码示例 1：页面滚动到顶部/底部 

在开发者工具中打开

<view class="wrap">
    <image mode="aspectFit" class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png" rel="external nofollow"  rel="external nofollow" ></image>
    <view class="swan-security-padding-bottom flex-button">
        <button type="primary" disabled="{{disabled}}" bindtap="scrollToBottom">滚动到页面底部</button>
        <button type="primary" disabled="{{!disabled}}" bindtap="scrollToTop">返回顶部</button>
    </view>
</view>

Page({
    data: {
        disabled: false
    },
    scrollToBottom(){
        swan.pageScrollTo({
            scrollTop: 3000, // 写一个大于当前页面高度的值
            duration: 300,
            success: () => {
                this.setData({
                    disabled: true
                });
                console.log('pageScrollTo success');
            },
            fail: err => {
                console.log('pageScrollTo fail', err);
            }
        });
    },
    scrollToTop() {
        swan.pageScrollTo({
            scrollTop: 0,
            duration: 300,
            success: () => {
                this.setData({
                    disabled: false
                });
                console.log('pageScrollTo success');
            },
            fail: err => {
                console.log('pageScrollTo fail', err);
            }
        });
    }
});

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

在开发者工具中打开

<view class="wrap">
    <image class="image" src="https://b.bdstatic.com/miniapp/images/longImage.png" rel="external nofollow"  rel="external nofollow" ></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: () => {
                    console.log('pageScrollTo success', res);
                },
                fail: err => {
                    console.log('pageScrollTo fail', err);
                }
            });
        })
        .exec();
    }
});

错误码

Android

iOS