小程序页面事件处理函数

onShareAppMessage(options: Object) 点击右上角通用菜单中的分享按钮时或点击页面内分享按钮时触发。详见分享。 onTitleClick() 点击标题时触发。 onOptionMenuClick() 点击右上角菜单按钮时触发。 onPopMenuClick() 点击右上角通用菜单按钮时触发。 onPullDownRefresh({from: manual|code}) 下拉刷新时触发。 需要先在 app.json 的 window 选项中开启 pullRefresh 。当处理完数据刷新 后，my.stopPullDownRefresh 可以停止当前页面的下拉刷新。 onPullIntercept() 下拉中断时触发。 onTabItemTap(object: Object) 点击 tabItem 时触发。 属性 类型 描述 from String 点击来源 pagePath String 被点击 tabItem 的页面路径 text String 被点击 tabItem 的按钮文字 index Number 被点击 tabItem 的序号，从 0 开始 onPageScroll({scrollTop}) 页面滚动时触发，scrollTop 为页面滚动距离。

onReachBottom() 上拉触底时触发。 events 为了使代码更加简洁，提供了新的事件处理对象 events。 已有的页面处理事件函数跟直接在 page 实例上暴露的事件函数等价。 注意：  events 从基础库 1.13.7 版本 开始支持。  请正确区分页面事件函数与 events 内同名事件函数的基础库版本要求。 以下是 events 支持的事件函数列表： 事件 类型 描述 最低版本 onBack Function 页面返回时触发 1.13.7 onKeyboardHeight Function 键盘高度变化时触发 1.13.7 onOptionMenuClick Function 点击右上角菜单按钮触发 1.13.7 onPopMenuClick Function 点击右上角通用菜单按钮触 发 1.13.7 onPullIntercept Function 下拉截断时触发 1.13.7 onPullDownRefresh Function({from: manual/code}) 页面下拉时触发 1.13.7 onTitleClick Function 点击标题触发 1.13.7 onTabItemTap Function 点击非当前 tabItem 后触 发 1.13.7 beforeTabItemTap Function 点击非当前 tabItem 前触 发 1.13.7 onResize Function({size: {windowWidth: number, windowHeight: number}}) window 尺寸改变时触发 示例代码：

my.canIUse('page.events.onBack');
Page({
 data: {
 text: 'This is page data.'
 },
 onLoad(){
 // 页面加载时触发
 },
 events:{
 onBack(){
 // 页面返回时触发
 },
 onKeyboardHeight(e){
 // 键盘高度变化时触发
 console.log('键盘高度：', e.height)
 },
 onOptionMenuClick(){
 // 点击右上角菜单按钮触发
 },
 onPopMenuClick(e){
 // 点击右上角通用菜单中的自定义菜单按钮触发
 console.log('用户点击自定义菜单的索引', e.index)
 console.log('用户点击自定义菜单的 name', e.name)
 console.log('用户点击自定义菜单的 menuIconUrl', e.menuIconUrl)
 },
 onPullIntercept(){
 // 下拉截断时触发
 },
 onPullDownRefresh(e){
 // 页面下拉时触发。e.from 的值是“code”表示 startPullDownRefresh 触发的
事件；值是“manual”表示用户下拉触发的下拉事件
 console.log('触发下拉刷新的类型', e.from)
 my.stopPullDownRefresh()
 },

 // 点击标题触发
 },
 onTabItemTap(e){
 // e.from 是点击且切换 tabItem 后触发，值是“user”表示用户点击触发的事件；
值是“api”表示 switchTab 触发的事件
 console.log('触发 tab 变化的类型', e.from)
 console.log('点击的 tab 对应页面的路径', e.pagePath)
 console.log('点击的 tab 的文字', e.text)
 console.log('点击的 tab 的索引', e.index)
 },
 beforeTabItemTap(){
 // 点击但切换 tabItem 前触发
 },
 onResize(e){
 // window 尺寸改变时触发
 var {windowWidth, windowHeight} = e.size
 console.log('改变后 window 的宽度', windowWidth)
 console.log('改变后 window 的高度', windowHeight)
 },
 }
})

Page.prototype.setData(data: Object, callback: Function) setData 会将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。 Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，可以不需要在 this.data 中预先定义。 使用过程中，需要注意以下几点： 1. 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。 2. 仅支持设置可 JSON 化的数据。 3. 请尽量避免一次设置过多的数据。 4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗 留一些潜在问题。 示例代码：

<button onTap="changeTitle"> Change normal data </button>
<view>{{array[0].text}}</view>
<button onTap="changeArray"> Change Array data </button>
<view>{{object.text}}</view>
<button onTap="changePlanetColor"> Change Object data </button>
<view>{{newField.text}}</view>
<button onTap="addNewKey"> Add new data </button>
<view>hello: {{name}}</view>
<button onTap="changeName"> Change name </button>

 data: {
 text: 'test',
 array: [{text: 'a'}],
 object: {
 text: 'blue',
 },
 name: 'taobao',
 },
 changeTitle() {
 // 错误！不要直接去修改 data 里的数据
 // this.data.text = 'changed data' 
 
 // 正确
 this.setData({
 text: 'ha',
 });
 },
 changeArray() {
 // 可以直接使用数据路径来修改数据
 this.setData({
 'array[0].text': 'b',
 });
 },
 changePlanetColor(){
 this.setData({

 });
 },
 addNewKey() {
 this.setData({
 'newField.text': 'c',
 });
 },
 changeName() {
 this.setData({
 name: 'alipay',
 }, () => { // 接受传递回调函数
 console.log(this); // this 当前页面实例
 this.setData({ name: this.data.name + ', ' + 'welcome!'});
 });
 },
});

参数说明：

data Object 待改变的数据 -
callback Function
回调函数，在页面渲
染更新完成之后执
行。
使用
my.canIUse('page.setData.callb
ack') 做兼容性处理。详见 1.7.0

Page.prototype.$spliceData(data: Object, callback: Function) 说明： $spliceData 自 1.7.2 之后才支持，可以使用 my.canIUse('page.$spliceData') 做兼容性处理。详见 兼容接口说明。 spliceData 同样用于将数据从逻辑层发送到视图层，但是相比于 setData，在处 理长列表的时候，其具有更高的性能。 Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，可以不需要在 this.data 中预先定义。value 为 一个数组（格式：[start, deleteCount, ...items]）, 数组的第一个元素为操作的 起始位置，第二个元素为删除的元素的个数，剩余的元素均为插入的数据。对应 es5 中数组的 splice 方法。 示例代码：

<view class="spliceData">
 <view a:for="{{a.b}}" key="{{item}}" style="border:1px solid red">
 {{item}}
 </view>
</view>

Page({
 data: {
 a: {
 b: [1,2,3,4],
 },
 },
 onLoad(){
 this.$spliceData({ 'a.b': [1, 0, 5, 6] });
 },
});

页面输出： 1 5 6 2 3 4 参数说明：

data Object 待改变的数据
callback Function 回调函数，在页面渲染更新完成之后执行。

Page.prototype.$batchedUpdates(callback: Function) 批量更新数据。 说明 $batchedUpdates 自 1.14.0 之后才支持，可以使用 my.canIUse('page.$batchedUpdates') 做兼容性处理。详见 兼容接口说明 参数说明： 事件 类型 描述 callback Function 在此回调函数中的数据操作会被批量更新。 下面是示例代码：

Page({
 data: {
 counter: 0,
 },
 plus() {
 setTimeout(() => {
 this.$batchedUpdates(() => {
 this.setData({
 counter: this.data.counter + 1,
 });
 this.setData({
 counter: this.data.counter + 1,
 });
 });
 }, 200);
 },
});

<view>{{counter}}</view>
<button onTap="plus">+2</button>

1. 本示例中每次点击按钮，页面的 counter 会加 2
2. 将 setData 放在 this.$batchedUpdates 中，这样尽管有多次 setData，但是却只有一 次数据的传输 Page.route Page 路径，对应 app.json 中配置的路径值，类型为 String。 这是一个只读属性。

 onShow() {
 // 对应 app.json 中配置的路径值
 console.log(this.route)
 }
})

内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library