页面事件

页面怎么打开、关掉见页面生命周期。本章是页面已经显示之后：滚动、轻触、滑动，以及点按钮去执行脚本。下拉刷新见下拉刷新。

点按已经拆开，不要用一个事件包打天下：

手势	页面空白	组件上（按钮、卡片等）
轻触一次	`Page.onTap`	JSON 写 `onTap`
连续轻触两次	`Page.onDoubleTap`	`onDoubleTap`
按住不放	`Page.onLongPress`	`onLongPress`
快滑	`onSwipeUp` / `Down` / `Left` / `Right`，或统一 `onSwipe`	—

组件上写了对应 JSON，空白处的页面事件不会再收到（点到按钮就只走按钮）。

Page({}) 里未声明的不会调用。onScroll 较频繁，只打到控制台。同时写了轻触和双击时，系统要等一小会儿才能区分，轻触会略慢。

javascript

Page({
  onTap() {},
  onDoubleTap() {},
  onLongPress() {},
  onSwipeUp() {},
  onSwipe(e) {}
});

事件

时机	方法
页面滚动	`onScroll(e)`，`e.scrollY` / `e.deltaY`
整页滚到底	`onReachBottom(e)`
整页滚到顶	`onReachTop(e)`
整页下拉刷新	`onPullDownRefresh()`，见下拉刷新
点空白	`onTap`
双击空白	`onDoubleTap`
长按空白	`onLongPress`
滑动	`onSwipeUp` / `onSwipeDown` / `onSwipeLeft` / `onSwipeRight` / `onSwipe`

组件上也可以写这些事件：按钮、卡片写 onTap，list / grid 可写 onScroll / onReachBottom / onReachTop，表单写 onChange，见组件。

写在 list / grid 行内时，onTap 和 onChange 都会带上当前行：

字段	含义
`e.value`	表单新值。Switch 为布尔
`e.item`	当前行数据
`e.index`	当前行下标，从 0 开始
`e.name`	控件 `name`（插值后的键；列表里静态同名会自动加上 `#下标`）

javascript

onToggle(e) {
  var list = this.data.comments || [];
  var i = e && e.index != null ? Number(e.index) : -1;
  if (i < 0) {
    return;
  }
  list[i].enabled = e.value === true;
  this.setData({ comments: list });
}

读写自定义组件用 this.selectComponent(id)，组件通知父级用 this.triggerEvent，见父页交互。

轻触后还可以写 JSON action（声明式跳转 / 提示等），详见页面结构 · JSON action。与 onTap 同时存在时先 JS 再 action。

页面方法

Page({}) 上除了 setData / appendData，还可以直接调用下面这些。其中跳转、提示、打开链接与 JSON action 同名；栈与底栏细节见页面跳转。

方法	作用
`this.navigate(page\|{ page, params })`	打开另一页
`this.redirect(page\|{ page, params })`	关掉当前二级页再打开
`this.switchTab(page\|{ page })`	切底栏。已打开过的 Tab 保留数据和滚动，只再走 `onShow`
`this.back()`	关闭当前二级页
`this.toast(text\|{ text, duration })`	短提示
`this.openUrl(url)`	系统浏览器打开
`this.setTitle(text\|{ text, color, background })`	改当前页标题栏
`this.scrollTo(y\|{ y, animated, top })`	滚页面，`y` 与 `onScroll.scrollY` 一样是 px
`this.showPopup(id\|showIf)` / `this.hidePopup(...)`	按弹层 `id` 或 `showIf` 显示隐藏
`this.showLoading(text?)` / `this.hideLoading()`	盖一层加载，不必在 JSON 里放 loading 节点
`this.stopPullDownRefresh()`	结束下拉刷新转圈，见下拉刷新
`this.setTabBar` / `setTabBarItem` / `setTabBarStyle`	底栏，见底部菜单

字符串参数会同时当作 page / text / url / id。自定义组件里调用这些方法，走的是所在页面。

javascript

this.setTitle('已改标题');
this.setTitle({ text: '已改标题', color: '#FFFFFF', background: '#006A65' });
this.scrollTo(400);
this.scrollTo({ y: 0, animated: false });
this.scrollTo({ top: true });
this.showPopup('sheet');
this.hidePopup('open');
this.showLoading('加载中');
this.hideLoading();
this.stopPullDownRefresh();

showPopup 会去页面 popups（以及 body 里的 type: popup）里找 id 或 showIf，再把对应字段写成 true。找不到就把参数当成数据路径。也可以继续 this.setData({ open: true })。

加载圈画在当前页最上层，和页面 JSON 里的 loading 组件不是同一个。列表触底转圈仍用 setData + showIf，见下面示例。

底栏方法的参数和示例见底部菜单。

列表触底时不要默认转圈。在 onReachBottom 里打开 loading，模拟或请求结束后再关掉：

javascript

onReachBottom: function () {
  if (this.data.loading || this.data.noMore) {
    return;
  }
  this.setData({ loading: true });
  var that = this;
  setTimeout(function () {
    that.setData({ loading: false, noMore: true, footer: '—— 我是有底线的 ——' });
  }, 2000);
}

执行脚本

轻触、长按等事件在 Page 方法里执行自动化脚本。路径相对项目根目录。

json

{ "type": "button", "text": "运行示例", "onTap": "onRunSample" }

javascript

Page({
  onRunSample() {
    Engines.executeScript('tasks/sample.js');
  },
  onRun(e) {
    Engines.executeScript(e.item.jsFile);
  }
});

Engines.executeScript 见 Engines。任务脚本里也可以再 require 公共代码（优先相对路径），见 require。

页面事件 ​

事件 ​

页面方法 ​

执行脚本 ​

页面事件

事件

页面方法

执行脚本