Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 351
Star 2
Fork 7
H
hello-uvue
提交 be4e86b0 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

perf(lifecycle): 优化生命周期示例

上级 795c142a
隐藏空白更改
内联 并排
Showing with 287 addition and 173 deletion
pages/lifecycle/page/page-composition.uvue
浏览文件 @ be4e86b0
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1" :bounces="false"> <scroll-view style="flex: 1" :bounces="false">
<!-- #endif --> <!-- #endif -->
<view class="page container"> <view class="page container">
<text>page lifecycle 组合式 API</text> <text>page lifecycle 组合式 API</text>
<button class="mt-10" @click="scrollToBottom"> <view class="flex flex-row justify-between mt-10">
scrollToBottom <text>onLoad 触发：</text>
<text>{{ isOnloadTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onPageShow 触发：</text>
<text>{{ isOnPageShowTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onReady 触发：</text>
<text>{{ isOnReadyTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onPullDownRefresh 触发：</text>
<text>{{ isOnPullDownRefreshTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onReachBottom 触发：</text>
<text>{{ isOnReachBottomTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onBackPress 触发：</text>
<text>{{ isOnBackPressTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onPageHide 触发：</text>
<text>{{ isOnPageHideTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onResize 触发：</text>
<text>{{ isOnResizeTriggered }}</text>
</view>
<button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
<button class="mt-10" @click="pullDownRefresh">
trigger pullDownRefresh
</button> </button>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts' import { state, setLifeCycleNum } from '@/store/index.uts'
type DataInfo = {
isScrolled : boolean
}
const dataInfo = reactive({
isScrolled: false,
} as DataInfo)
onLoad((_ : OnLoadOptions) => { const isOnloadTriggered = ref(false)
// 自动化测试 const isOnPageShowTriggered = ref(false)
setLifeCycleNum(state.lifeCycleNum + 100) const isOnReadyTriggered = ref(false)
}) const isOnPullDownRefreshTriggered = ref(false)
onPageShow(() => { const isOnPageScrollTriggered = ref(false)
// 自动化测试 const isOnReachBottomTriggered = ref(false)
setLifeCycleNum(state.lifeCycleNum + 10) const isOnBackPressTriggered = ref(false)
}) const isOnPageHideTriggered = ref(false)
onReady(() => { const isOnResizeTriggered = ref(false)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPullDownRefresh(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((_) => {
// 自动化测试
dataInfo.isScrolled = true
})
onReachBottom(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onBackPress((_ : OnBackPressOptions) : boolean | null => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
})
onPageHide(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
})
onUnload(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
})
onResize((_) => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
type DataInfo = {
isScrolled : boolean
}
const dataInfo = reactive({
isScrolled: false,
} as DataInfo)
onLoad((options : OnLoadOptions) => {
console.log('onLoad', options)
isOnloadTriggered.value = true
// 自动化测试 // 自动化测试
const pageGetLifeCycleNum = () : number => { setLifeCycleNum(state.lifeCycleNum + 100)
return state.lifeCycleNum })
} onPageShow(() => {
isOnPageShowTriggered.value = true
// 自动化测试 // 自动化测试
const pageSetLifeCycleNum = (num : number) => { setLifeCycleNum(state.lifeCycleNum + 10)
setLifeCycleNum(num) })
} onReady(() => {
isOnReadyTriggered.value = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPullDownRefresh(() => {
isOnPullDownRefreshTriggered.value = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onPageScroll((e: OnPageScrollOptions) => {
console.log('onPageScroll', e)
isOnPageScrollTriggered.value = true
// 自动化测试
dataInfo.isScrolled = true
})
onReachBottom(() => {
isOnReachBottomTriggered.value = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
onBackPress((options : OnBackPressOptions) : boolean | null => {
console.log('onBackPress', options)
isOnBackPressTriggered.value = true
// 自动化测试 // 自动化测试
const pullDownRefresh = () => { setLifeCycleNum(state.lifeCycleNum - 10)
uni.startPullDownRefresh({ return null
success() { })
setTimeout(() => { onPageHide(() => {
uni.stopPullDownRefresh() isOnPageHideTriggered.value = true
}, 1500) // 自动化测试
}, setLifeCycleNum(state.lifeCycleNum - 10)
}) })
} onUnload(() => {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
})
onResize((options: OnResizeOptions) => {
console.log('onBackPress', options)
isOnResizeTriggered.value = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
})
const scrollToBottom = () => { // 自动化测试
uni.pageScrollTo({ const pageGetLifeCycleNum = () : number => {
scrollTop: 2000, return state.lifeCycleNum
}) }
} // 自动化测试
const pageSetLifeCycleNum = (num : number) => {
setLifeCycleNum(num)
}
defineExpose({ // 自动化测试
dataInfo, const pullDownRefresh = () => {
pageGetLifeCycleNum, uni.startPullDownRefresh({
pageSetLifeCycleNum, success() {
pullDownRefresh, setTimeout(() => {
scrollToBottom, uni.stopPullDownRefresh()
}, 1500)
},
}) })
}
const scrollToBottom = () => {
uni.pageScrollTo({
scrollTop: 2000,
})
}
defineExpose({
dataInfo,
pageGetLifeCycleNum,
pageSetLifeCycleNum,
pullDownRefresh,
scrollToBottom,
})
</script> </script>
<style> <style>
.container { .container {
height: 1200px; height: 1200px;
} }
</style> </style>
\ No newline at end of file
pages/lifecycle/page/page-options.uvue
浏览文件 @ be4e86b0
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1" :bounces="false"> <scroll-view style="flex: 1" :bounces="false">
<!-- #endif --> <!-- #endif -->
<view class="page container"> <view class="page container">
<text>page lifecycle 选项式 API</text> <text>page lifecycle 选项式 API</text>
<button class="mt-10" @click="scrollToBottom">scrollToBottom</button> <view class="flex flex-row justify-between mt-10">
</view> <text>onLoad 触发：</text>
<!-- #ifdef APP --> <text>{{ isOnloadTriggered }}</text>
</scroll-view> </view>
<!-- #endif --> <view class="flex flex-row justify-between mt-10">
<text>onShow 触发：</text>
<text>{{ isOnShowTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onReady 触发：</text>
<text>{{ isOnReadyTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onPullDownRefresh 触发：</text>
<text>{{ isOnPullDownRefreshTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onReachBottom 触发：</text>
<text>{{ isOnReachBottomTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onBackPress 触发：</text>
<text>{{ isOnBackPressTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onHide 触发：</text>
<text>{{ isOnHideTriggered }}</text>
</view>
<view class="flex flex-row justify-between mt-10">
<text>onResize 触发：</text>
<text>{{ isOnResizeTriggered }}</text>
</view>
<button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
<button class="mt-10" @click="pullDownRefresh">
trigger pullDownRefresh
</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts' import { state, setLifeCycleNum } from '@/store/index.uts'
type DataInfo = { type DataInfo = {
isScrolled: boolean isScrolled: boolean
} }
export default { export default {
data() { data() {
return { return {
dataInfo: { isOnloadTriggered: false,
isScrolled: false, isOnShowTriggered: false,
} as DataInfo isOnReadyTriggered: false,
} isOnPullDownRefreshTriggered: false,
isOnPageScrollTriggered: false,
isOnReachBottomTriggered: false,
isOnBackPressTriggered: false,
isOnHideTriggered: false,
isOnResizeTriggered: false,
dataInfo: {
isScrolled: false,
} as DataInfo
}
},
onLoad(options : OnLoadOptions) {
console.log('onLoad', options)
this.isOnloadTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100)
},
onShow() {
this.isOnShowTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
onReady() {
this.isOnReadyTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
onPullDownRefresh() {
this.isOnPullDownRefreshTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
onPageScroll(e: OnPageScrollOptions) {
console.log('onPageScroll', e)
this.isOnPageScrollTriggered = true
// 自动化测试
this.dataInfo.isScrolled = true
},
onReachBottom() {
this.isOnReachBottomTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
onBackPress(options : OnBackPressOptions) : boolean | null {
console.log('onBackPress', options)
this.isOnBackPressTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
},
onHide() {
this.isOnHideTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
},
onUnload() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
},
onResize(options: OnResizeOptions) {
console.log('onBackPress', options)
this.isOnResizeTriggered = true
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
methods: {
// 自动化测试
pageGetLifeCycleNum() : number {
return state.lifeCycleNum
}, },
onLoad(_ : OnLoadOptions) { // 自动化测试
// 自动化测试 pageSetLifeCycleNum(num : number) {
setLifeCycleNum(state.lifeCycleNum + 100) setLifeCycleNum(num)
}, },
onShow() { // 自动化测试
// 自动化测试 pullDownRefresh() {
setLifeCycleNum(state.lifeCycleNum + 10) uni.startPullDownRefresh({
success() {
setTimeout(() => {
uni.stopPullDownRefresh()
// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒
}, 1500)
},
})
}, },
onReady() { scrollToBottom() {
// 自动化测试 uni.pageScrollTo({
setLifeCycleNum(state.lifeCycleNum + 10) scrollTop: 2000,
})
}, },
onPullDownRefresh() { },
// 自动化测试 }
setLifeCycleNum(state.lifeCycleNum + 10)
},
onPageScroll(_) {
// 自动化测试
this.dataInfo.isScrolled = true
},
onReachBottom() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
onBackPress(_ : OnBackPressOptions) : boolean | null {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
return null
},
onHide() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10)
},
onUnload() {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100)
},
onResize(_) {
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10)
},
methods: {
// 自动化测试
pageGetLifeCycleNum() : number {
return state.lifeCycleNum
},
// 自动化测试
pageSetLifeCycleNum(num : number) {
setLifeCycleNum(num)
},
// 自动化测试
pullDownRefresh() {
uni.startPullDownRefresh({
success() {
setTimeout(() => {
uni.stopPullDownRefresh()
// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒
}, 1500)
},
})
},
scrollToBottom() {
uni.pageScrollTo({
scrollTop: 2000,
})
},
},
}
</script> </script>
<style> <style>
.container { .container {
height: 1200px; height: 1200px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或