codecamp

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

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"></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"></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,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }