页面事件处理函数

    代码示例

    在开发者工具中打开

    在 WEB IDE 中打开

    说明

    • 需要在的window选项中开启 enablePullDownRefresh
    • 如果需要单个页面支持下拉刷新,可以直接在页面目录下的 json 配置文件中开启enablePullDownRefresh
    • 当处理完数据刷新后,可以停止当前页面的下拉刷新。

    onReachBottom

    解释:在Page中定义 onReachBottom 处理函数,监听该页面用户上拉触底事件。

    代码示例

    在开发者工具中打开

    1. // page.js
    2. Page({
    3. onReachBottom(e) {
    4. console.log('onReachBottom');
    5. // 常见的业务场景是开发者在这里请求分页数据
    6. }
    7. });

    说明

    • 可以在 app.json 的 window 选项中或页面配置中设置触发距离 onReachBottomDistance 。
    • 在触发距离内滑动期间,该事件只会被触发一次。

    解释:在 Page 中定义 onPageScroll 处理函数,监听用户滑动页面事件。
    方法参数:Object object
    Object 参数说明

    代码示例

    在开发者工具中打开

    注意

    • 请在需要的时候定义此方法,以减少不必要的事件派发对渲染层-逻辑层通信造成影响;
    • 请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作(尤其是每次传输大量数据的时候)。

    onShareAppMessage

    解释:在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息。

    • 用户点击页面内的”分享”按钮( 组件 open-type=”share”)或者页面右上角菜单的”分享”按钮的时候会调用;
    • 此事件需要 return 一个Object,用于自定义分享内容。

    百度 App 中扫码体验

    扫码体验

    代码示例

    请使用百度APP扫码

    方法参数:Object object
    Object 参数说明

    自定义分享字段

    代码示例

    在开发者工具中打开

    在 WEB IDE 中打开

    场景一:分享页面为 tab 页

    1. Page({
    2. data: {
    3. //推荐设置为具有小程序特色的标题
    4. },
    5. onShareAppMessage() {
    6. return {
    7. title: this.data.title,
    8. content: '世界很复杂,百度更懂你——小程序简介或详细描述',
    9. imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
    10. path: '/index/index',
    11. success(res) {
    12. // 分享成功
    13. },
    14. fail(err) {
    15. // 分享失败
    16. }
    17. };
    18. }
    19. });

    场景二:分享页面为详情落地页

    1. Page({
    2. data: {
    3. //推荐设置为文章标题
    4. title: '瑞信:予美团“跑赢大市”评级',
    5. content: [
    6. // 第一自然段
    7. '瑞信发布报告称,美团(03690)第三季外送业务同比增长约36%,加上盈利能力的持续改善,期内季绩将强劲增长,预计全年收入可同比增长38%至264亿元人民币,非国际财务报告准则净收益或达4.78亿元人民币。',
    8. // 第二自然段
    9. ]
    10. },
    11. onLoad(options) {
    12. this.data.id = options.id || '';
    13. },
    14. onShareAppMessage() {
    15. return {
    16. title: this.data.title,
    17. content: this.data.content[0],
    18. imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
    19. path: `/article/article?id=${this.data.id}`
    20. };
    21. }
    22. });

    Tips
    Page 中没有定义 onShareAppMessage 函数也可以正常调起分享功能,分享数据会优先使用 setPageInfo 中设置的页面标题和描述信息,其次使用小程序标题、小程序简介、小程序头像,再其次会使用默认智能小程序文案作为兜底,所以推荐开发者优先使用 setPageInfo 完善页面信息。

    分享渠道及字段说明图示

    动态及微信好友示例

    QQ空间及百度Hi示例

    系统分享示例

    解释:点击 tab 时触发。
    方法参数:Object object
    Object 参数说明

    代码示例

    在开发者工具中打开

    onURLQueryChange

    解释:在 Page 中定义 onURLQueryChange 处理函数,监听页面 URL query 改变。引起页面 URL query 更新的原因有:调用 。

    方法参数:Object object

    Object 参数说明

    代码示例

    在开发者工具中打开

    在 WEB IDE 中打开

    1. Page({
    2. onURLQueryChange({newURLQuery, oldURLQuery}) {
    3. // 输出结果为 {channel: 'movie'} {}
    4. console.log(newURLQuery, oldURLQuery);
    5. },
    6. onLoad(query) {
    7. if (!query.channel) {
    8. swan.setURLQuery({channel: 'movie'});
    9. }