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

2020-09-05 14:11 更新

swan.pageScrollTo


解释:将页面滚动到目标位置(可以设置滚动动画时长)。

方法参数

Object object

object 参数说明

属性名 类型 必填 默认值 说明

scrollTop

Number

滚动到页面的目标位置(单位 px)

duration

Number

300

滚动动画的时长(单位 ms)

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例


代码示例 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

错误码 说明

202

解析失败,请检查参数是否正确。

1001

执行失败

iOS

错误码 说明

202

解析失败,请检查参数是否正确。


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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号