百度智能小程序 將頁面滾動到目標位置

swan.pageScrollTo

解釋：將頁面滾動到目標位置（可以設置滾動動畫時長）。

方法參數(shù)

Object object

object 參數(shù)說明

示例

代碼示例 1：頁面滾動到頂部/底部 

在開發(fā)者工具中打開

<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：頁面滾動到底部 

在開發(fā)者工具中打開

<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