|
onInit 사용 참고 사항onInit使用注意
- 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
- 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
- 不依赖页面传参的逻辑可以直接使用 created 生命周期替代
onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：
| 属性 |
类型 |
说明 |
| scrollTop |
Number |
页面在垂直方向已滚动的距离（单位px） |
注意
-
onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
- 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。
- 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
- 在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。
-
onBackPress上不可使用async，会导致无法阻止默认返回
onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
console.log("滚动距离为：" + e.scrollTop);
},
onTabItemTap 返回的json对象说明：
| 属性 |
类型 |
说明 |
| index |
String |
被点击tabItem的序号，从0开始 |
| pagePath |
String |
被点击tabItem的页面路径 |
| text |
String |
被点击tabItem的按钮文字 |
注意
- onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
- 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。
- 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作
onTabItemTap : function(e) {
console.log(e);
// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},
onNavigationBarButtonTap 参数说明：
| 属性 |
类型 |
说明 |
| index |
Number |
原生标题栏按钮数组的下标 |
onNavigationBarButtonTap : function (e) {
console.log(e);
// e的返回格式为json对象：{"text":"测试","index":0}
}
onBackPress
- Baidu Mini Program Basic Library 3.260 이상에서만 onInit 수명 주기를 지원합니다.
- 다른 버전이나 플랫폼에서는 onLoad 수명 주기를 사용할 수 있습니다. 동시에 호환성을 위해 동일한 로직을 반복적으로 실행하지 않도록 주의하세요.
- 페이지 매개변수에 의존하지 않는 로직은 생성된 라이프 사이클로 직접 대체될 수 있습니다.
onReachBottom사용 참고 사항은 페이지에서 확인할 수 있습니다. json의 특정 페이지 하단에 onReachBottomDistance 트리거 거리를 정의합니다. 예를 들어 50으로 설정하면 페이지가 50px로 스크롤됩니다. 하단에서는 onReachBottom 이벤트가 트리거됩니다.
스크롤뷰를 사용하고 페이지가 스크롤되지 않으면 하단 이벤트가 발생하지 않습니다. 스크롤뷰가 하단으로 스크롤되는 이벤트는 스크롤뷰
onPageScroll 문서를 참조하세요. (스크롤링 청취, 스크롤링 청취, 스크롤링 이벤트) 매개변수 설명: |
|
| 속성
TypeDescription |
|
scrollTop | Number 페이지가 세로 방향으로 스크롤된 거리(단위 px) 🎜🎜🎜🎜🎜Note🎜🎜
- Do 아니
onPageScroll에 쓰기 페이지를 자주 수정하는 등 복잡한 js와 상호작용합니다. 이 라이프사이클은 렌더링 레이어에서 트리거되기 때문에 h5가 아닌 쪽에서는 js가 로직 레이어에서 실행되고 두 레이어 간의 통신이 끊어집니다. 스크롤 과정에서 두 레이어 간의 데이터 교환이 자주 발생하면 지연이 발생할 수 있습니다.
- 스크롤할 때 제목 표시줄의 투명한 그라데이션을 얻으려면 App 및 H5에서 참조용으로 Pages.json의 titleNView 아래 유형을 투명하게 구성할 수 있습니다.
- 특정 요소를 수정하기 위해 천장을 스크롤해야 하는 경우 CSS 고정 레이아웃을 사용하고 플러그인 마켓을 참조하는 것이 좋습니다. 플러그인 시장에는 다른 js 구현 천장 플러그인도 있지만 성능이 좋지 않습니다. 필요할 때 직접 검색할 수 있습니다.
- App, WeChat 애플릿 및 H5에서는 참조용으로 wxs를 사용하여 스크롤을 모니터링할 수 있습니다. app-nvue에서는 바인딩x를 사용하여 참조용으로 스크롤을 모니터링할 수 있습니다.
-
async는 onBackPress에서 사용할 수 없으며 이로 인해 기본 반환을 방지하지 못하게 됩니다.
export default {
data() {
return {};
},
onBackPress(options) {
console.log('from:' + options.from)
}
}🎜onTabItemTap 반환된 json 개체 설명: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜String🎜🎜클릭한 tabItem의 일련 번호, 0🎜🎜부터 시작 🎜 🎜pageP ath🎜🎜String🎜🎜 클릭한 tabItem의 페이지 경로🎜🎜🎜🎜text🎜🎜String🎜🎜클릭한 tabItem의 버튼 텍스트🎜🎜🎜🎜🎜🎜Note🎜🎜
- onTabItemTap 종종 현재 탭 항목을 클릭하거나 현재 페이지를 스크롤하거나 새로 고치는 데 사용됩니다. 다른 탭 항목을 클릭하면 페이지 전환이 반드시 실행됩니다.
- 페이지로 이동하지 않고 앱 측에서 탭 항목을 클릭하려면 onTabItemTap을 사용할 수 없습니다. plus.nativeObj.view를 사용하여 원래 탭 항목을 덮고 클릭을 차단할 수 있습니다. 이벤트.
- Alipay 애플릿 플랫폼 onTabItemTap은 현재 존재하지 않는 탭 항목을 클릭한 후 실행되므로 다시 위로 클릭하는 동작을 구현하는 데 사용할 수 없습니다.
rrreee🎜onNavigationBarButtonTap 매개변수 설명: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜Number🎜🎜기본 제목 표시줄 버튼 배열의 아래 첨자🎜🎜🎜 🎜rrreee🎜on BackPress 콜백 매개변수 개체 설명: 🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜from🎜🎜String🎜🎜트리거 반환 동작 소스: 'backbutton' - 왼쪽 위 모서리 탐색 바 버튼 및 Android 반환 키;' NavigateBack'——uni.navigateBack() 메서드. 🎜Alipay 애플릿은 이 필드 반환을 지원하지 않습니다🎜🎜🎜🎜🎜export default {
data() {
return {};
},
onBackPress(options) {
console.log('from:' + options.from)
}
}
注意
- nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
- 支付宝小程序真机可以监听到非
navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为
组件生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：
| 函数名 |
说明 |
平台差异说明 |
最低版本 |
| beforeCreate |
在实例初始化之后被调用。详见 |
|
|
| created |
在实例创建完成后被立即调用。详见 |
|
|
| beforeMount |
在挂载开始之前被调用。详见 |
|
|
| mounted |
挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 |
|
|
| beforeUpdate |
数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 |
仅H5平台支持 |
|
| updated |
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 |
仅H5平台支持 |
|
| beforeDestroy |
实例销毁之前调用。在这一步，实例仍然完全可用。详见 |
|
|
| destroyed |
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 |
|
|
推荐：《uniapp教程》
| 
