diff --git a/miniprogram/app.json b/miniprogram/app.json index ea1910fc..14f7688b 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -298,6 +298,18 @@ "examples/app-bar/pages/detail/index" ] }, + { + "root": "packageSkylineRouter", + "pages": [ + "pages/preset-router/index/index", + "pages/preset-router/list/index", + "pages/open-container/index/index", + "pages/open-container/detail/index", + "pages/open-container/other/index", + "pages/page-return-gesture/index/index" + ], + "renderer": "skyline" + }, { "root": "packageXRFrame", "pages": [ @@ -402,6 +414,12 @@ "packageComponent" ] }, + "page/animation/index": { + "network": "all", + "packages": [ + "packageSkylineRouter" + ] + }, "page/API/index": { "network": "all", "packages": [ diff --git a/miniprogram/packageSkylineRouter/components/example-card/index.js b/miniprogram/packageSkylineRouter/components/example-card/index.js new file mode 100644 index 00000000..88cb2462 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-card/index.js @@ -0,0 +1,24 @@ +// components/example-card/index.js +Component({ + + /** + * Component properties + */ + properties: { + + }, + + /** + * Component initial data + */ + data: { + + }, + + /** + * Component methods + */ + methods: { + + } +}) \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-card/index.json b/miniprogram/packageSkylineRouter/components/example-card/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-card/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-card/index.wxml b/miniprogram/packageSkylineRouter/components/example-card/index.wxml new file mode 100644 index 00000000..3a3449aa --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-card/index.wxml @@ -0,0 +1,14 @@ + + + + + + + Title + Secondary text + + Lorem ipsum dolor sit amet, consectetur + adipiscing elit, sed do eiusmod tempor. + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-card/index.wxss b/miniprogram/packageSkylineRouter/components/example-card/index.wxss new file mode 100644 index 00000000..d34f61b8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-card/index.wxss @@ -0,0 +1,46 @@ +/* components/example-card/index.wxss */ +.container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 300px; + border-radius: 4px; + overflow: hidden; + box-shadow: 0px 1px 2px 1px #E3E8E5; +} + +.img-wrap { + flex: 1; + width: 100%; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.38); +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.intro { + color: rgba(0, 0, 0, 0.54); + font-size: 14px; + padding: 16px; + font-style: italic; +} + +.title { + color: #000; + font-size: 20px; +} + +.img { + width: 100px; + height: 100px; +} + +.content { + margin-top: 16px; + width: 100%; + color: rgba(0, 0, 0, 0.54); +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-single-title/index.js b/miniprogram/packageSkylineRouter/components/example-single-title/index.js new file mode 100644 index 00000000..88cb2462 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-single-title/index.js @@ -0,0 +1,24 @@ +// components/example-card/index.js +Component({ + + /** + * Component properties + */ + properties: { + + }, + + /** + * Component initial data + */ + data: { + + }, + + /** + * Component methods + */ + methods: { + + } +}) \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-single-title/index.json b/miniprogram/packageSkylineRouter/components/example-single-title/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-single-title/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-single-title/index.wxml b/miniprogram/packageSkylineRouter/components/example-single-title/index.wxml new file mode 100644 index 00000000..cc1ef533 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-single-title/index.wxml @@ -0,0 +1,12 @@ + + + + + + + Title + + Lorem ipsum dolor sit, consectetur adipiscing elit + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/example-single-title/index.wxss b/miniprogram/packageSkylineRouter/components/example-single-title/index.wxss new file mode 100644 index 00000000..0fecac1a --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/example-single-title/index.wxss @@ -0,0 +1,49 @@ +/* components/example-card/index.wxss */ +.container { + display: flex; + flex-direction: row; + height: 100px; + border-radius: 4px; + overflow: hidden; + box-shadow: 0px 1px 2px 1px #E3E8E5; +} + +.img-wrap { + width: 100px; + height: 100px; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.38); +} + +.img { + width: 60px; + height: 60px; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.intro { + flex: 1; + color: rgba(0, 0, 0, 0.54); + font-size: 14px; + font-style: italic; + display: flex; + flex-direction: column; + justify-content: center; + padding:0 20px; +} + +.title { + color: #000; + font-size: 20px; +} + +.content { + margin-top: 16px; + width: 100%; + color: rgba(0, 0, 0, 0.54); +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/float-action-button/index.js b/miniprogram/packageSkylineRouter/components/float-action-button/index.js new file mode 100644 index 00000000..1b54b159 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/float-action-button/index.js @@ -0,0 +1,28 @@ +// components/float-action-button/index.js +Component({ + + /** + * Component properties + */ + properties: { + + }, + + options: { + virtualHost: true + }, + + /** + * Component initial data + */ + data: { + + }, + + /** + * Component methods + */ + methods: { + + } +}) \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/float-action-button/index.json b/miniprogram/packageSkylineRouter/components/float-action-button/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/float-action-button/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/float-action-button/index.wxml b/miniprogram/packageSkylineRouter/components/float-action-button/index.wxml new file mode 100644 index 00000000..453206dd --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/float-action-button/index.wxml @@ -0,0 +1,4 @@ + + + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/float-action-button/index.wxss b/miniprogram/packageSkylineRouter/components/float-action-button/index.wxss new file mode 100644 index 00000000..64ba3b52 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/float-action-button/index.wxss @@ -0,0 +1,14 @@ +/* components/float-action-button/index.wxss */ +.float-button { + width: 56px; + height: 56px; + border-radius: 50%; + background-color: plum; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + position: absolute; + right: 20px; + bottom: 60px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/small-card/index.js b/miniprogram/packageSkylineRouter/components/small-card/index.js new file mode 100644 index 00000000..88cb2462 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/small-card/index.js @@ -0,0 +1,24 @@ +// components/example-card/index.js +Component({ + + /** + * Component properties + */ + properties: { + + }, + + /** + * Component initial data + */ + data: { + + }, + + /** + * Component methods + */ + methods: { + + } +}) \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/small-card/index.json b/miniprogram/packageSkylineRouter/components/small-card/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/small-card/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/small-card/index.wxml b/miniprogram/packageSkylineRouter/components/small-card/index.wxml new file mode 100644 index 00000000..f1503a1a --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/small-card/index.wxml @@ -0,0 +1,10 @@ + + + + + + + Title + Secondary + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/small-card/index.wxss b/miniprogram/packageSkylineRouter/components/small-card/index.wxss new file mode 100644 index 00000000..b1594f30 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/small-card/index.wxss @@ -0,0 +1,49 @@ +/* components/example-card/index.wxss */ +.container { + display: flex; + flex-direction: column; + height: 225px; + border-radius: 4px; + overflow: hidden; + box-shadow: 0px 1px 2px 1px #E3E8E5; +} + +.img-wrap { + height: 150px; + width: 100%; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.38); +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.intro { + color: rgba(0, 0, 0, 0.54); + font-size: 14px; + padding: 10px; + font-style: italic; +} + +.title { + color: #000; + font-size: 20px; +} + +.sub-title { + margin-top: 4px; +} + +.img { + width: 80px; + height: 80px; +} + +.content { + margin-top: 16px; + width: 100%; + color: rgba(0, 0, 0, 0.54); +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/swipe-back/index.js b/miniprogram/packageSkylineRouter/components/swipe-back/index.js new file mode 100644 index 00000000..6fb2b865 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/swipe-back/index.js @@ -0,0 +1,138 @@ +// components/swiper-back/index.js +import { + GestureState, + lerp, + clamp, + Curves, +} from '../../custom-route/util' + +const { + timing, +} = wx.worklet + +const { + screenWidth +} = wx.getSystemInfoSync() + +Component({ + options: { + virtualHost: true + }, + /** + * 组件的属性列表 + */ + properties: { + + }, + + /** + * 组件的初始数据 + */ + data: { + isHomePage: false + }, + + lifetimes: { + attached() { + const pageStack = getCurrentPages() + if (pageStack.length === 1) { + this.setData({ + isHomePage: true + }) + } + this.customRouteContext = wx.router.getRouteContext(this) || {} + } + }, + + /** + * 组件的方法列表 + */ + methods: { + handleDragStart() { + 'worklet' + + const { + startUserGesture + } = this.customRouteContext + startUserGesture() + }, + + handleDragUpdate(delta) { + 'worklet' + + const { + primaryAnimation + } = this.customRouteContext + const newVal = primaryAnimation.value - delta + primaryAnimation.value = clamp(newVal, 0.0, 1.0) + }, + + handleDragEnd(velocity) { + 'worklet' + + const { + primaryAnimation, + stopUserGesture, + didPop + } = this.customRouteContext + + let animateForward = false + if (Math.abs(velocity) >= 1.0) { + animateForward = velocity <= 0 + } else { + animateForward = primaryAnimation.value > 0.5 + } + const t = primaryAnimation.value + const animationCurve = Curves.fastLinearToSlowEaseIn + if (animateForward) { + const droppedPageForwardAnimationTime = Math.min( + Math.floor(lerp(300, 0, t)), + 300, + ) + primaryAnimation.value = timing( + 1.0, + { + duration: droppedPageForwardAnimationTime, + easing: animationCurve, + }, + () => { + 'worklet' + + stopUserGesture() + }, + ) + } else { + const droppedPageBackAnimationTime = Math.floor(lerp(0, 300, t)) + primaryAnimation.value = timing( + 0.0, + { + duration: droppedPageBackAnimationTime, + easing: animationCurve, + }, + () => { + 'worklet' + + stopUserGesture() + didPop() + }, + ) + } + }, + + onSwipeBack(evt) { + 'worklet' + + if (evt.state === GestureState.BEGIN) { + this.handleDragStart() + } else if (evt.state === GestureState.ACTIVE) { + const delta = evt.deltaX / screenWidth + this.handleDragUpdate(delta) + } else if (evt.state === GestureState.END) { + const velocity = evt.velocityX / screenWidth + this.handleDragEnd(velocity) + } else if (evt.state === GestureState.CANCELLED) { + this.handleDragEnd(0.0) + } + }, + } +}) diff --git a/miniprogram/packageSkylineRouter/components/swipe-back/index.json b/miniprogram/packageSkylineRouter/components/swipe-back/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/swipe-back/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/swipe-back/index.wxml b/miniprogram/packageSkylineRouter/components/swipe-back/index.wxml new file mode 100644 index 00000000..ca32e758 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/swipe-back/index.wxml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/components/swipe-back/index.wxss b/miniprogram/packageSkylineRouter/components/swipe-back/index.wxss new file mode 100644 index 00000000..e1307063 --- /dev/null +++ b/miniprogram/packageSkylineRouter/components/swipe-back/index.wxss @@ -0,0 +1,8 @@ +/* components/swiper-back/index.wxss */ +.gesture-back-area { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 30px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/bottom-sheet.js b/miniprogram/packageSkylineRouter/custom-route/bottom-sheet.js new file mode 100644 index 00000000..24ac4f28 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/bottom-sheet.js @@ -0,0 +1,55 @@ +import { + CurveAnimation, + Curves, + Colors +} from './util' + +const BottomSheet = (customRouteContext) => { + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + const topRadius = 12 + + return { + overflow: 'hidden', + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + marginTop: '40vh', + transform: `translateY(${(1 - t) * 100}%)`, + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + return {} + } + + return { + opaque: false, + barrierColor: Colors.black87, + barrierDismissible: true, + transitionDuration: 400, + reverseTransitionDuration: 400, + fullscreenDrag: true, + handlePrimaryAnimation, + handlePreviousPageAnimation + } +} + +export default BottomSheet \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/cupertino-modal-inside.js b/miniprogram/packageSkylineRouter/custom-route/cupertino-modal-inside.js new file mode 100644 index 00000000..bf104f9a --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/cupertino-modal-inside.js @@ -0,0 +1,75 @@ +import { + CurveAnimation, + Curves, +} from './util' + +const CupertinoModalInside = (customRouteContext) => { + const menuRect = wx.getMenuButtonBoundingClientRect() + + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const topRadius = 12 + const offsetToMuenu = 2 + const prevPageBrightness = 0.9 + const prevPageVisibleOffset = 10 + const prevPageTop = menuRect.bottom + offsetToMuenu + const nextPageTop = prevPageTop + prevPageVisibleOffset + const nextPageBoxShadow = '0px 0px 10px 5px rgba(0, 0, 0, 0.12)' + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + return { + overflow: 'hidden', + boxShadow: nextPageBoxShadow, + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + marginTop: `${nextPageTop}px`, + transform: `translateY(${(1 - t) * 100}%)`, + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + const scale = 1 - t / 10 + const brightness = 1 + (prevPageBrightness - 1) * t + + return { + overflow: 'hidden', + filter: `brightness(${brightness})`, + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + transformOrigin: 'top center', + transform: `translateY(${-prevPageVisibleOffset * t}px) scale(${scale})`, + } + + } + + return { + opaque: false, + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + } +} + +export default CupertinoModalInside \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/cupertino-modal.js b/miniprogram/packageSkylineRouter/custom-route/cupertino-modal.js new file mode 100644 index 00000000..3aefef67 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/cupertino-modal.js @@ -0,0 +1,116 @@ +import { + CurveAnimation, + Curves, +} from './util' + +const { + shared, + runOnJS +} = wx.worklet + +const setNavigationBarColor = () => { + wx.setNavigationBarColor({ + frontColor: '#ffffff', + backgroundColor: '#000000', + duration: 50, + }); +} + +const resetNavigationBarColor = () => { + wx.setNavigationBarColor({ + frontColor: '#000000', + backgroundColor: '#ffffff', + duration: 50, + }); +} + +const NavBarColorStatus = { + white: 0, + black: 1, +} + +const CupertinoModal = (customRouteContext) => { + const menuRect = wx.getMenuButtonBoundingClientRect() + + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const topRadius = 12 + const offsetToMuenu = 2 + const navBarColoThreshold = 0.3 + const prevPageBrightness = 0.9 + const prevPageVisibleOffset = 10 + const prevPageTop = menuRect.bottom + offsetToMuenu + const nextPageTop = prevPageTop + prevPageVisibleOffset + const nextPageBoxShadow = '0px 0px 10px 5px rgba(0, 0, 0, 0.12)' + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const navBarColor = shared(NavBarColorStatus.black) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + if (t > navBarColoThreshold) { + if (navBarColor.value === NavBarColorStatus.black) { + navBarColor.value = NavBarColorStatus.white + runOnJS(setNavigationBarColor)() + } + } else { + if (navBarColor.value === NavBarColorStatus.white) { + navBarColor.value = NavBarColorStatus.black + runOnJS(resetNavigationBarColor)() + } + } + + return { + overflow: 'hidden', + boxShadow: nextPageBoxShadow, + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + marginTop: `${nextPageTop}px`, + transform: `translateY(${(1 - t) * 100}%)`, + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + const scale = 1 - t / 10 + const brightness = 1 + (prevPageBrightness - 1) * t + + return { + overflow: 'hidden', + filter: `brightness(${brightness})`, + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + transformOrigin: 'top center', + transform: `translateY(${prevPageTop * t}px) scale(${scale})`, + } + + } + + return { + opaque: false, + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + } +} + +export default CupertinoModal \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/cupertino.js b/miniprogram/packageSkylineRouter/custom-route/cupertino.js new file mode 100644 index 00000000..958b79a9 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/cupertino.js @@ -0,0 +1,54 @@ +import { + CurveAnimation, + Curves, + genSecondaryAnimationHandler +} from './util' + +const Cupertino = (customRouteContext) => { + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress + } = customRouteContext + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + return { + transform: `translateX(${(1 - t ) * 100}%)` + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + return { + transform: `translateX(${-1 / 3 * t * 100}%)` + } + } + + const handleSecondaryAnimation = genSecondaryAnimationHandler(customRouteContext) + + return { + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + handleSecondaryAnimation + } +} + +export default Cupertino \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/fade-upwards.js b/miniprogram/packageSkylineRouter/custom-route/fade-upwards.js new file mode 100644 index 00000000..26f42d2e --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/fade-upwards.js @@ -0,0 +1,40 @@ +import { + Curves, + genSecondaryAnimationHandler +} from './util' + +const FadeUpwards = (customRouteContext) => { + const { + primaryAnimation, + } = customRouteContext + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + const oProgress = Curves.easeIn(t) + const yProgress = Curves.fastOutSlowIn(t) + const transY = 0.25 * (1 - yProgress) + + return { + opacity: 1 * oProgress, + transform: `translateY(${transY * 100}%)` + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + return {} + } + + const handleSecondaryAnimation = genSecondaryAnimationHandler(customRouteContext) + + return { + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + handleSecondaryAnimation + } +} + +export default FadeUpwards \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/index.js b/miniprogram/packageSkylineRouter/custom-route/index.js new file mode 100644 index 00000000..d810f193 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/index.js @@ -0,0 +1,27 @@ +import CupertinoModal from './cupertino-modal' +import CupertinoModalInside from './cupertino-modal-inside' +import ModalNavigation from './modal-navigation' +import Modal from './modal' +import FadeUpwards from './fade-upwards' +import Upwards from './upwards' +import Zoom from './zoom' +import Cupertino from './cupertino' +import BottomSheet from './bottom-sheet' + +let hasInstallRouteBuiler = false +export function installRouteBuilder() { + if (hasInstallRouteBuiler) return + wx.router.addRouteBuilder('CupertinoModal', CupertinoModal) + wx.router.addRouteBuilder('CupertinoModalInside', CupertinoModalInside) + wx.router.addRouteBuilder('ModalNavigation', ModalNavigation) + wx.router.addRouteBuilder('Modal', Modal) + wx.router.addRouteBuilder('FadeUpwards', FadeUpwards) + wx.router.addRouteBuilder('Upwards', Upwards) + wx.router.addRouteBuilder('Zoom', Zoom) + wx.router.addRouteBuilder('Cupertino', Cupertino) + wx.router.addRouteBuilder('BottomSheet', BottomSheet) + + hasInstallRouteBuiler = true + + console.info('skyline: installRouteBuilder') +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/modal-navigation.js b/miniprogram/packageSkylineRouter/custom-route/modal-navigation.js new file mode 100644 index 00000000..753fdb57 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/modal-navigation.js @@ -0,0 +1,51 @@ +import { + CurveAnimation, + Curves, +} from './util' + +const ModalNavigation = (customRouteContext) => { + const menuRect = wx.getMenuButtonBoundingClientRect() + + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const topRadius = 12 + const offsetToMuenu = 2 + const prevPageVisibleOffset = 10 + const prevPageTop = menuRect.bottom + offsetToMuenu + const nextPageTop = prevPageTop + prevPageVisibleOffset + const nextPageBoxShadow = '0px 0px 10px 5px rgba(0, 0, 0, 0.12)' + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + return { + overflow: 'hidden', + boxShadow: nextPageBoxShadow, + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + marginTop: `${nextPageTop}px`, + transform: `translateX(${(1 - t) * 100}%)`, + } + } + + return { + opaque: false, + handlePrimaryAnimation, + } +} + +export default ModalNavigation \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/modal.js b/miniprogram/packageSkylineRouter/custom-route/modal.js new file mode 100644 index 00000000..76180d2d --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/modal.js @@ -0,0 +1,60 @@ +import { + Colors, + CurveAnimation, + Curves, +} from './util' + +const Modal = (customRouteContext) => { + const menuRect = wx.getMenuButtonBoundingClientRect() + + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const topRadius = 12 + const offsetToMuenu = 2 + const prevPageVisibleOffset = 10 + const prevPageTop = menuRect.bottom + offsetToMuenu + const nextPageTop = prevPageTop + prevPageVisibleOffset + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + return { + overflow: 'hidden', + borderRadius: `${topRadius}px ${topRadius}px 0px 0px`, + marginTop: `${nextPageTop}px`, + transform: `translateY(${(1 - t) * 100}%)`, + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + return {} + } + + return { + opaque: false, + barrierColor: Colors.black87, + barrierDismissible: true, + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation + } +} + +export default Modal \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/upwards.js b/miniprogram/packageSkylineRouter/custom-route/upwards.js new file mode 100644 index 00000000..b2eaee37 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/upwards.js @@ -0,0 +1,58 @@ +import { + CurveAnimation, + Curves, + Colors, + genSecondaryAnimationHandler, +} from './util' + +const { + Easing +} = wx.worklet + +const Upwards = (customRouteContext) => { + const { + primaryAnimation, + primaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const transitionCurve = Easing.cubicBezier(0.20, 0.00, 0.00, 1.00) + + const _curvePrimaryAnimation = CurveAnimation({ + animation: primaryAnimation, + animationStatus: primaryAnimationStatus, + curve: transitionCurve, + reverseCurve: Easing.out(transitionCurve) + }) + + const handlePrimaryAnimation = () => { + 'worklet' + let t = primaryAnimation.value + if (!userGestureInProgress.value) { + t = _curvePrimaryAnimation.value + } + + return { + overflow: 'hidden', + transform: `translateY(${(1 - t) * 100}%)` + } + } + + const handlePreviousPageAnimation = () => { + 'worklet' + return {} + } + + const handleSecondaryAnimation = genSecondaryAnimationHandler(customRouteContext) + + return { + barrierColor: Colors.black26, + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + handleSecondaryAnimation + } +} + +export default Upwards \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/custom-route/util.js b/miniprogram/packageSkylineRouter/custom-route/util.js new file mode 100644 index 00000000..d5cd8516 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/util.js @@ -0,0 +1,105 @@ +const { derived, Easing } = wx.worklet + +export const GestureState = { + POSSIBLE: 0, + BEGIN: 1, + ACTIVE: 2, + END: 3, + CANCELLED: 4, +} + +export const clamp = (v, lower, upper) => { + 'worklet' + if (v < lower) return lower + if (v > upper) return upper + return v +} + +export const lerp = (begin, end, t) => { + 'worklet' + return begin + (end - begin) * t +} + +export const AnimationStatus = { + dismissed: 0, + forward: 1, + reverse: 2, + completed: 3, +} + +export const Colors = { + black12: 'rgba(0, 0, 0, 0.12)', + black26: 'rgba(0, 0, 0, 0.26)', + black38: 'rgba(0, 0, 0, 0.38)', + black45: 'rgba(0, 0, 0, 0.45)', + black54: 'rgba(0, 0, 0, 0.54)', + black87: 'rgba(0, 0, 0, 0.87)', +} + +export const Curves = { + fastLinearToSlowEaseIn: Easing.cubicBezier(0.18, 1.0, 0.04, 1.0), + linearToEaseOut: Easing.cubicBezier(0.35, 0.91, 0.33, 0.97), + easeInToLinear: Easing.cubicBezier(0.67, 0.03, 0.65, 0.09), + fastOutSlowIn: Easing.cubicBezier(0.4, 0.0, 0.2, 1.0), + decelerateEasing: Easing.cubicBezier(0.0, 0.0, 0.2, 1.0), + easeOutCubic: Easing.cubicBezier(0.215, 0.61, 0.355, 1.0), + easeIn: Easing.in(Easing.ease), + easeOut: Easing.out(Easing.ease), + ease: Easing.ease, +} + +export const bottomSheetSuspendedCurve = (startingPoint, curve = Curves.easeOutCubic) => { + 'worklet' + return (t) => { + 'worklet' + if (t < startingPoint) return t + if (t === 1.0) return t + const curveProgress = (t - startingPoint) / (1 - startingPoint) + const transformed = curve(curveProgress) + return startingPoint + (1 - startingPoint) * transformed + } +} + +export function CurveAnimation({ + animation, + animationStatus, + curve, + reverseCurve +}) { + return derived(() => { + 'worklet' + const useForwardCurve = !reverseCurve || animationStatus.value !== AnimationStatus.reverse + const activeCurve = useForwardCurve ? curve : reverseCurve + const t = animation.value + if (!activeCurve) return t + if (t === 0 || t === 1) return t + return activeCurve(t) + }) +} + +export function genSecondaryAnimationHandler(customRouteContext) { + const { + secondaryAnimation, + secondaryAnimationStatus, + userGestureInProgress, + } = customRouteContext + + const _curveSecondaryAnimation = CurveAnimation({ + animation: secondaryAnimation, + animationStatus: secondaryAnimationStatus, + curve: Curves.linearToEaseOut, + reverseCurve: Curves.easeInToLinear + }) + + const handleSecondaryAnimation = () => { + 'worklet' + let t = secondaryAnimation.value + if (!userGestureInProgress.value) { + t = _curveSecondaryAnimation.value + } + return { + transform: `translateX(${-1 / 3 * t * 100}%)` + } + } + return handleSecondaryAnimation +} diff --git a/miniprogram/packageSkylineRouter/custom-route/zoom.js b/miniprogram/packageSkylineRouter/custom-route/zoom.js new file mode 100644 index 00000000..478ceed3 --- /dev/null +++ b/miniprogram/packageSkylineRouter/custom-route/zoom.js @@ -0,0 +1,255 @@ +import { + genSecondaryAnimationHandler, + AnimationStatus +} from './util' + +const { + shared, + derived, + Easing +} = wx.worklet + + +const Zoom = (customRouteContext) => { + const { + primaryAnimation, + primaryAnimationStatus, + } = customRouteContext + + const intervalCurve = (begin, end) => { + return (t) => { + 'worklet' + const clamp = (v, lower, upper) => { + if (v < lower) return lower + if (v > upper) return upper + return v + } + t = clamp((t - begin) / (end - begin), 0.0, 1.0) + return t + } + } + + const chainTween = (begin, end, curve) => { + return (t) => { + 'worklet' + if (t === 0.0) { + return begin + } + if (t === 1.0) { + return end + } + const transform_t = curve(t) + const current = begin + (end - begin) * transform_t + return current + } + } + + const fastOutExtraSlowInTweenSequenceItems = [{ + tween: chainTween(0.0, 0.4, Easing.cubicBezier(0.05, 0.0, 0.133333, 0.06)), + weight: 0.166666 + }, { + tween: chainTween(0.4, 1.0, Easing.cubicBezier(0.208333, 0.82, 0.25, 1.0)), + weight: 1.0 - 0.166666 + }] + + const tweenSequence = (tweenSequenceItems = []) => { + const _interval = (start, end) => { + const value = (t) => { + 'worklet' + return (t - start) / (end - start) + } + + const contains = (t) => { + 'worklet' + return t >= start && t < end + } + return { + value, + contains + } + } + + const _items = tweenSequenceItems.slice() + + let totalWeight = 0.0 + for (let item of _items) { + totalWeight += item.weight + } + + const _intervals = [] + let start = 0.0 + for (let i = 0; i < _items.length; i++) { + const end = i === _items.length - 1 ? 1.0 : (start + _items[i].weight / totalWeight) + _intervals.push(_interval(start, end)) + start = end + } + + return (t) => { + 'worklet' + const _evaluateAt = (t, index) => { + const element = _items[index] + const tInterval = _intervals[index].value(t) + return element.tween(tInterval) + } + + if (t === 0) { + return _evaluateAt(t, _items.length - 1) + } + for (let index = 0; index < _items.length; index++) { + if (_intervals[index].contains(t)) { + return _evaluateAt(t, index) + } + } + } + } + + const scaleCurveSequence = tweenSequence(fastOutExtraSlowInTweenSequenceItems) + + let zoomEnterTransition, zoomExitTransition + + (() => { + const _fadeInTransition = chainTween(0.00, 1.00, intervalCurve(0.125, 0.250)) + const _scaleDownTransition = chainTween(1.10, 1.00, scaleCurveSequence) + const _scaleUpTransition = chainTween(0.85, 1.00, scaleCurveSequence) + + zoomEnterTransition = (reverse = false) => { + if (reverse) { + return (t) => { + 'worklet' + const opacity = 1.0 + const scale = _scaleDownTransition(t) + return { + opacity, + transform: `scale(${scale})` + } + } + } + return (t) => { + 'worklet' + const opacity = _fadeInTransition(t) + const scale = _scaleUpTransition(t) + return { + opacity, + transform: `scale(${scale})` + } + } + } + })(); + + (() => { + const _fadeOutTransition = chainTween(1.0, 0.0, intervalCurve(0.0825, 0.2075)) + const _scaleUpTransition = chainTween(1.00, 1.05, scaleCurveSequence) + const _scaleDownTransition = chainTween(1.00, 0.90, scaleCurveSequence) + + zoomExitTransition = (reverse = false) => { + if (reverse) { + return (t) => { + 'worklet' + const opacity = _fadeOutTransition(t) + const scale = _scaleDownTransition(t) + return { + opacity, + transform: `scale(${scale})` + } + } + } + return (t) => { + 'worklet' + const opacity = 1.0 + const scale = _scaleUpTransition(t) + return { + opacity, + transform: `scale(${scale})` + } + } + } + })(); + + const _generateAnimationHandler = (animation, animationStatus, forwardTransition, reverseTransition) => { + const _effectiveAnimationStatus = shared(animationStatus.value) + return () => { + 'worklet' + const _calculateEffectiveAnimationStatus = (lastEffective, current) => { + switch (current) { + case AnimationStatus.dismissed: + case AnimationStatus.completed: + return current + case AnimationStatus.forward: + switch (lastEffective) { + case AnimationStatus.dismissed: + case AnimationStatus.completed: + case AnimationStatus.forward: + return current + case AnimationStatus.reverse: + return lastEffective + } + case AnimationStatus.reverse: + switch (lastEffective) { + case AnimationStatus.dismissed: + case AnimationStatus.completed: + case AnimationStatus.reverse: + return current + case AnimationStatus.forward: + return lastEffective + } + } + } + + const progress = animation.value + const currentStatus = animationStatus.value + const lastEffectiveStatus = _effectiveAnimationStatus.value + + const effectiveAnimationStatus = _calculateEffectiveAnimationStatus( + lastEffectiveStatus, + currentStatus, + ) + _effectiveAnimationStatus.value = effectiveAnimationStatus + + let style + switch (effectiveAnimationStatus) { + case AnimationStatus.dismissed: + case AnimationStatus.forward: + style = forwardTransition(progress) + break + case AnimationStatus.reverse: + case AnimationStatus.completed: + style = reverseTransition(1 - progress) + break + } + return style + } + } + + const reverseAnimation = derived(() => { + 'worklet' + return 1 - primaryAnimation.value + }) + + const reverseAnimationStatus = derived(() => { + 'worklet' + const status = primaryAnimationStatus.value + switch (status) { + case AnimationStatus.forward: return AnimationStatus.reverse + case AnimationStatus.reverse: return AnimationStatus.forward + case AnimationStatus.completed: return AnimationStatus.dismissed + case AnimationStatus.dismissed: return AnimationStatus.completed + } + }) + + const handlePrimaryAnimation = _generateAnimationHandler(primaryAnimation, primaryAnimationStatus, zoomEnterTransition(), zoomExitTransition(true)) + + const handlePreviousPageAnimation = _generateAnimationHandler(reverseAnimation, reverseAnimationStatus, zoomEnterTransition(true), zoomExitTransition()) + + const handleSecondaryAnimation = genSecondaryAnimationHandler(customRouteContext) + + + return { + transitionDuration: 400, + reverseTransitionDuration: 400, + handlePrimaryAnimation, + handlePreviousPageAnimation, + handleSecondaryAnimation + } +} + +export default Zoom \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/images/icon_down_arrow.svg b/miniprogram/packageSkylineRouter/images/icon_down_arrow.svg new file mode 100644 index 00000000..bb4929c6 --- /dev/null +++ b/miniprogram/packageSkylineRouter/images/icon_down_arrow.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/detail/index.js b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.js new file mode 100644 index 00000000..0651320f --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.js @@ -0,0 +1,35 @@ +// pages/detail/index.js +Component({ + + /** + * Component properties + */ + properties: { + + }, + + /** + * Component initial data + */ + data: { + + }, + + /** + * Component methods + */ + methods: { + goOther() { + wx.navigateTo({ + url: '../other/index', + }) + }, + + goOther2() { + wx.navigateTo({ + url: '../other/index', + routeType: 'wx://cupertino-modal' + }) + } + } +}) \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/detail/index.json b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxml b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxml new file mode 100644 index 00000000..371469aa --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxml @@ -0,0 +1,45 @@ + + + + + + + + Title + + + 正常跳转 other 页 + 半屏跳转 other 页 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Vulputate dignissim + suspendisse in est. Ut ornare lectus sit amet. Eget nunc lobortis mattis + aliquam faucibus purus in. Hendrerit gravida rutrum quisque non tellus + orci ac auctor. Mattis aliquam faucibus purus in massa. Tellus rutrum + tellus pellentesque eu tincidunt tortor. Nunc eget lorem dolor sed. Nulla + at volutpat diam ut venenatis tellus in metus. Tellus cras adipiscing enim + eu turpis. Pretium fusce id velit ut tortor. Adipiscing enim eu turpis + egestas pretium. Quis varius quam quisque id. Blandit aliquam etiam erat + velit scelerisque. In nisl nisi scelerisque eu. Semper risus in hendrerit + gravida rutrum quisque. Suspendisse in est ante in nibh mauris cursus + mattis molestie. Adipiscing elit duis tristique sollicitudin nibh sit + amet commodo nulla. Pretium viverra suspendisse potenti nullam ac tortor + vitae. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Vulputate dignissim + suspendisse in est. Ut ornare lectus sit amet. Eget nunc lobortis mattis + aliquam faucibus purus in. Hendrerit gravida rutrum quisque non tellus + orci ac auctor. Mattis aliquam faucibus purus in massa. Tellus rutrum + tellus pellentesque eu tincidunt tortor. Nunc eget lorem dolor sed. Nulla + at volutpat diam ut venenatis tellus in metus. Tellus cras adipiscing enim + eu turpis. Pretium fusce id velit ut tortor. Adipiscing enim eu turpis + egestas pretium. Quis varius quam quisque id. Blandit aliquam etiam erat + velit scelerisque. In nisl nisi scelerisque eu. Semper risus in hendrerit + gravida rutrum quisque. Suspendisse in est ante in nibh mauris cursus + mattis molestie. Adipiscing elit duis tristique sollicitudin nibh sit + amet commodo nulla. Pretium viverra suspendisse potenti nullam ac tortor + vitae; + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxss b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxss new file mode 100644 index 00000000..a4453577 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/detail/index.wxss @@ -0,0 +1,43 @@ +/* pages/detail/index.wxss */ +page { + height: 100vh; + display: flex; + flex-direction: column; +} + +.scrollable { + flex: 1; + overflow: hidden; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.img-wrap { + height: 250px; + width: 100%; + padding: 70px; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.38); +} + +.img { + width: 25vw; + height: 25vw; +} + +.article { + padding: 20px; + font-size: 16px; + font-style: italic; + line-height: 1.5; + color: rgba(0, 0, 0, 0.54); +} + +.title { + font-size: 30px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/index/index.js b/miniprogram/packageSkylineRouter/pages/open-container/index/index.js new file mode 100644 index 00000000..e01ba069 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/index/index.js @@ -0,0 +1,50 @@ +const genList = (num) => { + const ans = [] + for (let i = 0; i < num; i++) { + ans.push({ + id: i, + }) + } + return ans +} +Page({ + data: { + type: 'fade', + duration: 300, + closedElevation: 1, + closedBorderRadius: 4, + openElevation: 4, + openBorderRadius: 0, + list: genList(10), + detailPage: '../detail/index', + renderer: '', + }, + onShareAppMessage() { + return { + title: 'open-container', + path: 'packageSkylineRouter/page/open-container/index/index' + } + }, + onLoad() { + this.setData({ + renderer: this.renderer + }) + }, + + goDetail() { + wx.navigateTo({ + url: '../detail/index' + }) + }, + + toggleType() { + const type = this.data.type === 'fade' ? 'fadeThrough' : 'fade' + this.setData({ + type + }) + wx.showToast({ + info: 'none', + title: `${type}`, + }) + } +}) diff --git a/miniprogram/packageSkylineRouter/pages/open-container/index/index.json b/miniprogram/packageSkylineRouter/pages/open-container/index/index.json new file mode 100644 index 00000000..b385017a --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/index/index.json @@ -0,0 +1,11 @@ +{ + "usingComponents": { + "example-card": "../../../components/example-card/index", + "small-card": "../../../components/small-card/index", + "example-single-title": "../../../components/example-single-title/index" + }, + "navigationBarTitleText": "Open Container Demo", + "componentFramework": "glass-easel", + "renderer": "skyline", + "navigationStyle": "custom" +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxml b/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxml new file mode 100644 index 00000000..c9722fcc --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxml @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + List item {{index + 1}} + Secondary text + + + + + + + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxss b/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxss new file mode 100644 index 00000000..64db20a3 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/index/index.wxss @@ -0,0 +1,104 @@ +/* pages/detail/index.wxss */ +page { + height: 100vh; + display: flex; + flex-direction: column; +} + +.scrollable { + flex: 1; + overflow: hidden; + box-sizing: border-box; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +.img-wrap { + height: 250px; + width: 100%; + padding: 70px; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.38); +} + +.img { + width: 100%; + height: 100%; +} + +.article { + padding: 20px; + font-size: 16px; + line-height: 1.5; + color: rgba(0, 0, 0, 0.54); +} + +.title { + font-size: 30px; + margin-bottom: 10px; +} + +.card-row { + margin-bottom: 16px; + display: flex; + flex-direction: row; +} + +.card-item { + flex: 1; +} + +.split { + width: 8px; + height: 100%; +} + +.list-title { + display: flex; + flex-direction: row; + padding: 10px 0 15px; + font-style: italic; + font-size: 14px; + color: rgba(0, 0, 0, 0.54); +} + +.list-item-leading { + margin-left: 20px; + margin-right: 15px; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.list-item-content { + display: flex; + flex-direction: column; + justify-content: center; +} + +.item-title { + font-size: 16px; + color: #000; +} + +.float-button { + width: 56px; + height: 56px; + position: absolute; + right: 20px; + bottom: 60px; +} + +.ball { + height: 100%; + border-radius: 50%; + background-color: plum; + font-size: 24px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/other/index.js b/miniprogram/packageSkylineRouter/pages/open-container/other/index.js new file mode 100644 index 00000000..b10b5e7e --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/other/index.js @@ -0,0 +1,66 @@ +// pages/other/index.js +Page({ + + /** + * Page initial data + */ + data: { + + }, + + /** + * Lifecycle function--Called when page load + */ + onLoad(options) { + + }, + + /** + * Lifecycle function--Called when page is initially rendered + */ + onReady() { + + }, + + /** + * Lifecycle function--Called when page show + */ + onShow() { + + }, + + /** + * Lifecycle function--Called when page hide + */ + onHide() { + + }, + + /** + * Lifecycle function--Called when page unload + */ + onUnload() { + + }, + + /** + * Page event handler function--Called when user drop down + */ + onPullDownRefresh() { + + }, + + /** + * Called when page reach bottom + */ + onReachBottom() { + + }, + + /** + * Called when user click on the top right corner to share + */ + onShareAppMessage() { + + } +}) diff --git a/miniprogram/packageSkylineRouter/pages/open-container/other/index.json b/miniprogram/packageSkylineRouter/pages/open-container/other/index.json new file mode 100644 index 00000000..8bd39b28 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/other/index.json @@ -0,0 +1,4 @@ +{ + "usingComponents": {}, + "styleIsolation": "isolated" +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxml b/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxml new file mode 100644 index 00000000..65670cba --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxml @@ -0,0 +1,3 @@ + + +pages/other/index.wxml \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxss b/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxss new file mode 100644 index 00000000..87fc7154 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/open-container/other/index.wxss @@ -0,0 +1,3 @@ +text { + padding: 16px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.js b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.js new file mode 100644 index 00000000..18cff094 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.js @@ -0,0 +1,108 @@ +const CustomRotue = { + BottomSheet: 'wx://bottom-sheet', + Upwards: 'wx://upwards', + FadeUpwards: 'wx://fade-upwards', + Zoom: 'wx://zoom', + Modal: 'wx://modal', + Cupertino: 'wx://cupertino', + CupertinoModal: 'wx://cupertino-modal', + CupertinoModalInside: 'wx://cupertino-modal-inside', + ModalNavigation: 'wx://modal-navigation', +} + +Page({ + data: { + round: true, + popGestureDirection: 'vertical', + range: ['horizontal', 'vertical', 'multi'], + list: [ + { + id: 0, + routeType: CustomRotue.BottomSheet, + disableDrag: 1, + content: 'BottomSheet' + }, + { + id: 1, + routeType: CustomRotue.Upwards, + nextRouteType: CustomRotue.Upwards, + content: 'Upwards', + fullscreen: 1, + }, + { + id: 2, + routeType: CustomRotue.FadeUpwards, + nextRouteType: CustomRotue.FadeUpwards, + fullscreen: 1, + content: 'Fade Upwards' + }, + { + id: 3, + routeType: CustomRotue.Zoom, + nextRouteType: CustomRotue.Zoom, + fullscreen: 1, + content: 'Zoom' + }, + { + id: 4, + routeType: CustomRotue.Modal, + nextRouteType: CustomRotue.ModalNavigation, + content: 'Modal with navigation' + }, + // { + // id: 5, + // routeType: CustomRotue.Cupertino, + // nextRouteType: CustomRotue.Cupertino, + // fullscreen: 1, + // content: 'Cupertino (iOS default)' + // }, + { + id: 6, + routeType: CustomRotue.CupertinoModal, + nextRouteType: CustomRotue.CupertinoModalInside, + content: 'Cupertino Modal inside modal' + }, + { + id: 7, + routeType: CustomRotue.CupertinoModal, + nextRouteType: CustomRotue.ModalNavigation, + fullscreen: 1, + content: 'Cupertino Modal with navigation' + }, + ] + }, + onShareAppMessage() { + return { + title: 'page-return-gesture', + path: 'packageSkylineRouter/page/page-return-gesture/index/index' + } + }, + onLoad() {}, + + goNextPage(e) { + const { routeType, nextRouteType, fullscreen, disableDrag } = e.currentTarget.dataset + wx.navigateTo({ + url: `/packageSkylineRouter/pages/preset-router/list/index?disableDrag=${disableDrag}&fullscreen=${fullscreen}&nextRouteType=${nextRouteType || ''}`, + routeType, + routeOptions: { + round: this.data.round, + }, + routeConfig: { + fullscreenDrag: true, + popGestureDirection: this.data.popGestureDirection + } + }); + }, + onChange(e) { + const popGestureDirection = this.data.range[e.detail.value] + this.setData({ + popGestureDirection + }) + }, + + toggleRound() { + this.setData({ + round: !this.data.round + }) + } +}); \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.json b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.json new file mode 100644 index 00000000..ea72e8e2 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": {}, + "componentFramework": "glass-easel", + "renderer": "skyline", + "navigationStyle": "custom", + "styleIsolation": "isolated" +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxml b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxml new file mode 100644 index 00000000..e49f7d75 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxml @@ -0,0 +1,25 @@ + +Custom Page Route Example + + {{item.content}} + + + + + BottomSheet round: {{round}}，点击切换 + + + + + + popGestureDirection: {{popGestureDirection}} + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxss b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxss new file mode 100644 index 00000000..b49aacd7 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/page-return-gesture/index/index.wxss @@ -0,0 +1,15 @@ +.section { + padding: 15px; + font-size: 24px; +} + +.intro { + padding: 15px; + font-size: 14px; + color: grey +} + +.item { + padding: 15px; + font-size: 18px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/index/index.js b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.js new file mode 100644 index 00000000..dff564ed --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.js @@ -0,0 +1,88 @@ +const CustomRotue = { + BottomSheet: 'wx://bottom-sheet', + Upwards: 'wx://upwards', + FadeUpwards: 'wx://fade-upwards', + Zoom: 'wx://zoom', + Modal: 'wx://modal', + Cupertino: 'wx://cupertino', + CupertinoModal: 'wx://cupertino-modal', + CupertinoModalInside: 'wx://cupertino-modal-inside', + ModalNavigation: 'wx://modal-navigation', +} + +Page({ + data: { + list: [ + { + id: 0, + routeType: CustomRotue.BottomSheet, + disableDrag: 1, + content: 'BottomSheet' + }, + { + id: 1, + routeType: CustomRotue.Upwards, + nextRouteType: CustomRotue.Upwards, + content: 'Upwards', + fullscreen: 1, + }, + { + id: 2, + routeType: CustomRotue.FadeUpwards, + nextRouteType: CustomRotue.FadeUpwards, + fullscreen: 1, + content: 'Fade Upwards' + }, + { + id: 3, + routeType: CustomRotue.Zoom, + nextRouteType: CustomRotue.Zoom, + fullscreen: 1, + content: 'Zoom' + }, + { + id: 4, + routeType: CustomRotue.Modal, + nextRouteType: CustomRotue.ModalNavigation, + content: 'Modal with navigation' + }, + // { + // id: 5, + // routeType: CustomRotue.Cupertino, + // nextRouteType: CustomRotue.Cupertino, + // fullscreen: 1, + // content: 'Cupertino (iOS default)' + // }, + { + id: 6, + routeType: CustomRotue.CupertinoModal, + nextRouteType: CustomRotue.CupertinoModalInside, + content: 'Cupertino Modal inside modal' + }, + { + id: 7, + routeType: CustomRotue.CupertinoModal, + nextRouteType: CustomRotue.ModalNavigation, + fullscreen: 1, + content: 'Cupertino Modal with navigation' + }, + ] + }, + onShareAppMessage() { + return { + title: 'preset-router', + path: 'packageSkylineRouter/page/preset-router/index/index' + } + }, + onLoad() { }, + + goNextPage(e) { + const { + routeType, nextRouteType, fullscreen, disableDrag + } = e.currentTarget.dataset + wx.navigateTo({ + url: `/packageSkylineRouter/pages/preset-router/list/index?disableDrag=${disableDrag}&fullscreen=${fullscreen}&nextRouteType=${nextRouteType || ''}`, + routeType + }) + } +}) diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/index/index.json b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.json new file mode 100644 index 00000000..ea72e8e2 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": {}, + "componentFramework": "glass-easel", + "renderer": "skyline", + "navigationStyle": "custom", + "styleIsolation": "isolated" +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxml b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxml new file mode 100644 index 00000000..75e5c34c --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxml @@ -0,0 +1,13 @@ + +Custom Page Route Example + + {{item.content}} + + diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxss b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxss new file mode 100644 index 00000000..b49aacd7 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/index/index.wxss @@ -0,0 +1,15 @@ +.section { + padding: 15px; + font-size: 24px; +} + +.intro { + padding: 15px; + font-size: 14px; + color: grey +} + +.item { + padding: 15px; + font-size: 18px; +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/list/index.js b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.js new file mode 100644 index 00000000..fe13f35b --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.js @@ -0,0 +1,204 @@ +// half-page/index.js +import { + GestureState, + lerp, + clamp, + Curves, + bottomSheetSuspendedCurve, +} from '../../../custom-route/util' + +const getList = (num) => { + const ans = [] + for (let i = 0; i < num; i++) { + ans.push({ + id: i + }) + } + return ans +} + +const { + timing, + shared +} = wx.worklet + +const _minFlingVelocity = 500 +const _closeProgressThreshold = 0.6 +const _duration = 400 + +Page({ + data: { + list: getList(40), + nextRouteType: '', + fullscreen: false + }, + + onLoad(query) { + const { nextRouteType, fullscreen, disableDrag } = query + this.setData({ + nextRouteType, + fullscreen + }) + this.disableDrag = disableDrag == '1' + this.initSharedValue() + }, + + goNextpage() { + const { nextRouteType, fullscreen } = this.data + if (!nextRouteType) return + + wx.navigateTo({ + url: `/packageSkylineRouter/pages/preset-router/list/index?fullscreen=${fullscreen}&nextRouteType=${nextRouteType}`, + routeType: nextRouteType + }) + }, + + back() { + wx.navigateBack({ + delta: 1, + }) + }, + + initSharedValue() { + this.childHeight = shared(0) + this.scrollTop = shared(0) + this.startPan = shared(false) + this.customRouteContext = wx.router.getRouteContext(this) || {} + + this.getChildHeight() + }, + + getChildHeight() { + this.createSelectorQuery().select('.container').boundingClientRect((rect) => { + this.childHeight.value = rect.height + }).exec() + }, + + shouldPanResponse() { + 'worklet' + + return this.startPan.value + }, + shouldScrollViewResponse(pointerEvent) { + 'worklet' + + const { + primaryAnimation + } = this.customRouteContext + if (primaryAnimation.value < 1) return false + const scrollTop = this.scrollTop.value + const { + deltaY + } = pointerEvent + const result = !(scrollTop <= 0 && deltaY > 0) + this.startPan.value = !result + return result + }, + adjustDecelerationVelocity(velocity) { + 'worklet' + + const scrollTop = this.scrollTop.value + return scrollTop <= 0 ? 0 : velocity + }, + handleScroll(evt) { + 'worklet' + + this.scrollTop.value = evt.detail.scrollTop + }, + handleDragStart() { + 'worklet' + + this.startPan.value = true + const { + startUserGesture + } = this.customRouteContext + startUserGesture() + }, + + handleDragUpdate(delta) { + 'worklet' + + const { + primaryAnimation + } = this.customRouteContext + const newVal = primaryAnimation.value - delta + primaryAnimation.value = clamp(newVal, 0.0, 1.0) + }, + + handleDragEnd(velocity) { + 'worklet' + + this.startPan.value = false + const { + primaryAnimation, + stopUserGesture, + userGestureInProgress, + didPop + } = this.customRouteContext + + if (!userGestureInProgress.value) return + + let animateForward = false + if (Math.abs(velocity) >= _minFlingVelocity) { + animateForward = velocity <= 0 + } else { + animateForward = primaryAnimation.value > _closeProgressThreshold + } + const t = primaryAnimation.value + const animationCurve = bottomSheetSuspendedCurve(t, Curves.decelerateEasing) + + if (animateForward) { + const remainingFraction = 1.0 - t + const simulationDuration = _duration * remainingFraction + + primaryAnimation.value = timing( + 1.0, + { + duration: simulationDuration, + easing: animationCurve, + }, + () => { + 'worklet' + + stopUserGesture() + }, + ) + } else { + // TODO: 结合松手时的速度作 spring 动画 + const remainingFraction = t + const simulationDuration = _duration * remainingFraction + const animationCurve = Curves.easeOutCubic + + primaryAnimation.value = timing( + 0.0, + { + duration: simulationDuration, + easing: animationCurve, + }, + () => { + 'worklet' + + stopUserGesture() + didPop() + }, + ) + } + }, + + handleVerticalDrag(evt) { + 'worklet' + + if (this.disableDrag) return + if (evt.state === GestureState.BEGIN) { + this.handleDragStart() + } else if (evt.state === GestureState.ACTIVE) { + const delta = evt.deltaY / this.childHeight.value + this.handleDragUpdate(delta) + } else if (evt.state === GestureState.END) { + const velocity = evt.velocityY + this.handleDragEnd(velocity) + } else if (evt.state === GestureState.CANCELLED) { + this.handleDragEnd(0.0) + } + }, +}) diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/list/index.json b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.json new file mode 100644 index 00000000..8835af06 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxml b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxml new file mode 100644 index 00000000..023d1939 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxml @@ -0,0 +1,22 @@ + + + + + + + + + + New Page + + + + + + {{nextRouteType ? 'tap item' : 'item'}} {{item.id}} + + + + + + \ No newline at end of file diff --git a/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxss b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxss new file mode 100644 index 00000000..cdc79ef0 --- /dev/null +++ b/miniprogram/packageSkylineRouter/pages/preset-router/list/index.wxss @@ -0,0 +1,66 @@ +page { + height: 100vh; +} + +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.header { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: 60px; + background-color: rgb(249 ,249, 249); +} + +.header .btn-wrp { + position: absolute; + left: 0; + height: 100%; + padding: 0 32rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.header .btn { + width: 30px; + height: 30px; + border: 1px solid #ccc; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; +} + +.empty { + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + flex: 1; +} + +.left-icon { + transform: rotate(90deg); +} + +.header .icon { + width: 20px; + height: 20px; +} + +.item { + display: flex; + align-items: center; + padding: 20px; + font-size: 16px ; + border-top: 1px solid rgba(0, 0, 0, 0.15); +} \ No newline at end of file diff --git a/miniprogram/page/animation/index.ts b/miniprogram/page/animation/index.ts index 9c6c5b0b..43fd6913 100644 --- a/miniprogram/page/animation/index.ts +++ b/miniprogram/page/animation/index.ts @@ -8,13 +8,13 @@ Page({ console.log('getExptInfoSync expt_args_3', wx.getExptInfoSync(['expt_args_3'])) } if (wx.canIUse('reportEvent')) { - wx.reportEvent('expt_event_1', {expt_data: 1}) - wx.reportEvent('expt_event_2', {expt_data: 5}) - wx.reportEvent('expt_event_3', {expt_data: 9}) - wx.reportEvent('expt_event_4', {expt_data: 200}) + wx.reportEvent('expt_event_1', { expt_data: 1 }) + wx.reportEvent('expt_event_2', { expt_data: 5 }) + wx.reportEvent('expt_event_3', { expt_data: 9 }) + wx.reportEvent('expt_event_4', { expt_data: 200 }) - wx.reportEvent('weexpt_event_key_1', {option_1: 1, option_2: 10, option_str_1: 'abc'}) - wx.reportEvent('weexpt_event_key_1', {option_1: 'abc', option_2: '1000', option_str_1: '1'}) + wx.reportEvent('weexpt_event_key_1', { option_1: 1, option_2: 10, option_str_1: 'abc' }) + wx.reportEvent('weexpt_event_key_1', { option_1: 'abc', option_2: '1000', option_str_1: '1' }) } }, onShareAppMessage() { @@ -31,13 +31,13 @@ Page({ list: [ { id: 'SkylineBase', - name: '基础组件', + name: 'Skyline 增强特性', open: false, pages: [ - { url: 'worklet/animation/index', name: 'worklet 动画'}, - { url: 'worklet/gesture/index', name: '手势系统'}, - { url: 'share-element/list/index', name: '共享元素动画'}, - { url: 'worklet/bottom-sheet/index', name: '手势协商'}, + { url: 'worklet/animation/index', name: 'worklet 动画' }, + { url: 'worklet/gesture/index', name: '手势系统' }, + { url: 'share-element/list/index', name: '共享元素动画' }, + { url: 'worklet/bottom-sheet/index', name: '手势协商' }, { key: 'custom-route', url: '/packageSkyline/pages/half-page/scale-page/index', name: '自定义路由' } ] }, { @@ -45,36 +45,45 @@ Page({ name: '常见交互组件', open: false, pages: [ - { url: '/packageSkylineExamples/examples/address-book/pages/index/index', name: '通讯录'}, - { key: 'custom-route', url: '/packageSkylineExamples/examples/album/pages/album/index', name: '相册'}, - { url: '/packageSkylineExamples/examples/card_transition/pages/list/list', name: '卡片转场'}, - { url: '/packageSkylineExamples/examples/half-screen/pages/index/index', name: '半屏弹窗'}, - { url: '/packageSkylineExamples/examples/segmented-half-screen/pages/index/index', name: '分段式半屏'}, - { url: '/packageSkylineExamples/examples/tab-indicator/pages/index/index', name: 'Tab 指示条'}, - { url: '/packageSkylineExamples/examples/product-list/pages/index/index', name: '搜索栏吸附'}, - { url: '/packageSkylineExamples/examples/expanded-scroll-view/pages/index/index', name: '沉浸式商品浏览'}, - { url: '/packageSkylineExamples/examples/refresher-two-level/index/index', name: '下拉二楼'}, - { url: '/packageSkylineExamples/examples/app-bar/pages/index/index', name: '全局工具栏'} + { url: '/packageSkylineExamples/examples/address-book/pages/index/index', name: '通讯录' }, + { key: 'custom-route', url: '/packageSkylineExamples/examples/album/pages/album/index', name: '相册' }, + { url: '/packageSkylineExamples/examples/card_transition/pages/list/list', name: '卡片转场' }, + { url: '/packageSkylineExamples/examples/half-screen/pages/index/index', name: '半屏弹窗' }, + { url: '/packageSkylineExamples/examples/segmented-half-screen/pages/index/index', name: '分段式半屏' }, + { url: '/packageSkylineExamples/examples/tab-indicator/pages/index/index', name: 'Tab 指示条' }, + { url: '/packageSkylineExamples/examples/product-list/pages/index/index', name: '搜索栏吸附' }, + { url: '/packageSkylineExamples/examples/expanded-scroll-view/pages/index/index', name: '沉浸式商品浏览' }, + { url: '/packageSkylineExamples/examples/refresher-two-level/index/index', name: '下拉二楼' }, + { url: '/packageSkylineExamples/examples/app-bar/pages/index/index', name: '全局工具栏' } + ] + }, { + id: 'SkylineRouter', + name: 'Skyline 路由动画', + open: false, + pages: [ + { url: 'preset-router/index/index', name: '预设路由' }, + { url: 'open-container/index/index', name: '容器转场动画' }, + { url: 'page-return-gesture/index/index', name: '页面返回手势' } ] }, { id: 'XRFrame', name: 'XRFrame 高性能XR解决方案', open: false, pages: [ - { url: 'pages/index/index', name: '总览'} + { url: 'pages/index/index', name: '总览' } ] }, { id: 'adaptive', name: '多端适配（需在PC端体验）', open: false, pages: [ - {name: '左右伸缩', url: 'adapt/telescopic/telescopic'}, - {name: '换行排列', url: 'adapt/linebreak/linebreak'}, - {name: '侧边导航栏', url: 'adapt/sidenavigation/sidenavigation'}, - {name: '分页展现', url: 'adapt/pagination/pagination'}, - {name: '自由布局', url: 'adapt/freelayout/freelayout'}, - {name: '分层展现', url: 'adapt/layeredpresentation/layeredpresentation'}, - {name: '横向拓展', url: 'adapt/horizontalexpansion/horizontalexpansion'} + { name: '左右伸缩', url: 'adapt/telescopic/telescopic' }, + { name: '换行排列', url: 'adapt/linebreak/linebreak' }, + { name: '侧边导航栏', url: 'adapt/sidenavigation/sidenavigation' }, + { name: '分页展现', url: 'adapt/pagination/pagination' }, + { name: '自由布局', url: 'adapt/freelayout/freelayout' }, + { name: '分层展现', url: 'adapt/layeredpresentation/layeredpresentation' }, + { name: '横向拓展', url: 'adapt/horizontalexpansion/horizontalexpansion' } ] } ], @@ -92,8 +101,8 @@ Page({ }) if (wx.onThemeChange) { - wx.onThemeChange(({theme}) => { - this.setData({theme}) + wx.onThemeChange(({ theme }) => { + this.setData({ theme }) }) } }, diff --git a/miniprogram/page/animation/index.wxml b/miniprogram/page/animation/index.wxml index 5bf19983..7fbc19d4 100644 --- a/miniprogram/page/animation/index.wxml +++ b/miniprogram/page/animation/index.wxml @@ -45,6 +45,11 @@ {{page.name}} + + + {{page.name}} + + {{page}}