uniapp所有页面的触发方法

1. uniapp所有页面的触发方法

在uniapp中，所有页面的触发方法都有以下几种：

1.1 onLoad

当页面加载时会触发onLoad函数，这个函数只会在页面加载时执行一次。

该函数接收一个options参数，该参数为页面跳转时携带的参数。可以使用该参数获取传递的参数。例如：

export default {
  onLoad(options) {
    // 获取传递的参数
    const { id } = options;
    console.log('id:', id);
  }
};

其中，onLoad函数只在普通页面中有效，组件中不作用。

1.2 onShow

当页面每次展示都会触发onShow函数，即每次从前台进入页面都会执行。

该函数没有参数，但可以在组件中通过：getCurrentPages()[n].options获取到该页面跳转时携带的参数。例如：

export default {
  onShow() {
    // 获取传递的参数
    const { id } = getCurrentPages()[getCurrentPages().length - 1].options;
    console.log('id:', id);
  }
};

在页面跳转返回时，也会触发onShow函数。可以在该函数中更新页面数据。例如：

export default {
  onShow() {
    // 更新数据
    this.getList();
  }
};

1.3 onHide和onUnload

当页面被隐藏或卸载时会触发onHide和onUnload函数，需要注意的是，当页面被隐藏时，onHide函数会先于onUnload函数触发。

这两个函数都没有参数，可以在这个函数中保存数据。例如：

export default {
  onHide() {
    // 保存页面数据
    uni.setStorageSync('pageData', this.data);
  },
  onUnload() {
    // 保存页面数据
    uni.setStorageSync('pageData', this.data);
  }
};

1.4 onPullDownRefresh和onReachBottom

当页面下拉或上拉到底部时会触发onPullDownRefresh和onReachBottom函数，需要注意的是，只有当前页面跟页面顶部距离小于50px时才会触发下拉刷新。

这两个函数都没有参数，可以在这个函数中获取新数据。例如：

export default {
  onPullDownRefresh() {
    // 请求新数据
    this.getData();
    // 停止下拉刷新
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 请求新数据
    this.getData();
  }
};

1.5 onPageScroll

当页面滚动时会触发onPageScroll函数，该函数接收一个参数，参数为页面滚动的位置信息。可以在该函数中获取当前页面滚动的位置。例如：

export default {
  onPageScroll({ scrollTop }) {
    // 获取当前页面滚动的位置
    console.log('scrollTop:', scrollTop);
  }
};

1.6 onTabItemTap

当底部tab栏被点击时会触发onTabItemTap函数，该函数接收一个参数，参数为当前被点击的tab的信息。可以在该函数中获取当前被点击的tab信息。例如：

export default {
  onTabItemTap({ index, pagePath, text }) {
    // 获取当前被点击的tab信息
    console.log('index:', index);
    console.log('pagePath:', pagePath);
    console.log('text:', text);
  }
};

2. 总结

uniapp所有页面的触发方法详细介绍了uniapp中所有页面的触发方法，包括：onLoad、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onPageScroll、onTabItemTap。掌握这些方法可以更好地开发uniapp应用，并且优化用户体验。