Window Phone 7 :Page生命周期

 
 private void Application_Activated(object sender, ActivatedEventArgs e)
        {
            Debug.WriteLine("App is activated at {0}", DateTime.Now.ToLongTimeString());
        }

 private void Application_Launching(object sender, LaunchingEventArgs e)
        {
            Debug.WriteLine("App is launching at {0}",DateTime.Now.ToLongTimeString());
        }

 private void Application_Deactivated(object sender, DeactivatedEventArgs e)
        {
            Debug.WriteLine("App is deactivated at {0}", DateTime.Now.ToLongTimeString());
        }

 private void Application_Closing(object sender, ClosingEventArgs e)
        {
            Debug.WriteLine("App is closing at {0}", DateTime.Now.ToLongTimeString());
        }

<template> <div class="scroll-container" ref="container"> <section v-for="(section, index) in sections" :key="index" :class="[{ active: currentIndex === index }, section.bgClass]" > <div class="section section-one" v-if="index === 0"> <div class="title">{{ section.title }}</div> <img src="./img/phone.png" alt="" /> <div class="content">{{ section.content }}</div> </div> <div class="section section-two" v-if="index === 1"> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> <div class="section section-three" v-if="index === 2"> <div> <img src="./img/phone3.png" alt="" /> </div> <div> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> </div> <div class="section section-four" v-if="index === 3"> <div> <img src="./img/phone4.png" alt="" /> </div> <div> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> </div> <div class="section section-five" v-if="index === 4"> <div class="title">{{ section.title }}</div> <img src="./img/phone5.png" alt="" /> <div class="content">{{ section.content }}</div> </div> <!-- <div class="scroll-indicator">↓ 继续滑动 ↓</div> --> </section> </div> </template> <script setup> import { ref, onMounted, // onUnmounted } from "vue"; // 页面内容数据 const sections = ref([ { title: "土豆星球", content: "现代人的生活压力通常很大,各行各业皆是如此,你的挚爱亲朋不理解你,你的公司领导瞧不上你,也许是你没能遇到一个懂你、理解你的知己,也许是你的脆弱不希望和身边的人去诉说。来T土豆星球,进行一次心灵测试,我们来帮你找到那个懂你,倾听你的他/她,让相似经历的你们,彼此陪伴,伴你走出人生的低谷。", bgClass: "bg1", }, { title: "穿越过去", content: "每个人都曾经历过痛苦的离别,每个人的内心深处都有很多来不及说出的话,时空胶囊能让你和失去/逝去的人隔空对话,任何时间任何地点,点开土豆星球,打开时空胶囊,都能让你回到过去,跟爷爷奶奶说一句:“家里一切都好,你们好吗?” 跟父母说一句:“我爱你们”公司基于强大的技术实力和元宇宙的星现形式,为你补完内心深处的遗憾。", bgClass: "bg2", }, { title: "心灵对话", content: "在遭受困难时,你会不会感叹命运的不公?为什么别人过的那么好,而你却什么也不是?很多人因此失去了人生的目标和对未来的希望。你是否希望未来的自己能穿越回现在给你指引方向?其实每个人都不普通,只是你还没找到自己的闪光点,让我们站在未来的高处,跨域时间和现实的梏,让未来的你,伸手将今天的自己拉出困境与低谷。 ", bgClass: "bg3", }, { title: "匹配社交", content: "现代人的生活压力通常很大,各行各业皆是如此,你的挚爱亲朋不理解你,你的公司领导瞧不上你,也许是你没能遇到一个懂你、理解你的知己,也许是你的脆弱不希望和身边的人去诉说。来T土豆星球,进行一次心灵测试,我们来帮你找到那个懂你,倾听你的他/她,让相似经历的你们,彼此陪伴,伴你走出人生的低谷。", bgClass: "bg4", }, { title: "寻找话题", content: "我们每个人都是不同的个体,有不同的价值观,或许事情没有绝对的对错,只是缺少聊得来的人。网络虽然大,但依旧无法分享你喜欢的聊天话题,那些在你心里积攒了无数个日月的话,想找别人分享,但一直没有找到分享的对象,那么土豆星球是一个你能够展示自己的平台,有一群和你志同道合的小伙伴在等着你!", bgClass: "bg5", }, ]); const container = ref(null); const currentIndex = ref(0); let isScrolling = false; // 处理滚动事件 const handleWheel = (e) => { if (isScrolling) return; isScrolling = true; const direction = e.deltaY > 0 ? 1 : -1; const newIndex = Math.min( Math.max(currentIndex.value + direction, 0), sections.value.length - 1 ); if (newIndex !== currentIndex.value) { currentIndex.value = newIndex; container.value.scrollTo({ top: window.innerHeight * newIndex, behavior: "smooth", }); } setTimeout(() => { isScrolling = false; }, 800); }; // 添加键盘支持 const handleKeyDown = (e) => { if (e.key === "ArrowDown") { currentIndex.value = Math.min( currentIndex.value + 1, sections.value.length - 1 ); } else if (e.key === "ArrowUp") { currentIndex.value = Math.max(currentIndex.value - 1, 0); } container.value.scrollTo({ top: window.innerHeight * currentIndex.value, behavior: "smooth", }); }; // 添加触摸滑动支持 let touchStartY = 0; const handleTouchStart = (e) => { touchStartY = e.touches[0].clientY; }; const handleTouchEnd = (e) => { const touchEndY = e.changedTouches[0].clientY; const diff = touchStartY - touchEndY; if (Math.abs(diff) > 50) { const direction = diff > 0 ? 1 : -1; const newIndex = Math.min( Math.max(currentIndex.value + direction, 0), sections.value.length - 1 ); if (newIndex !== currentIndex.value) { currentIndex.value = newIndex; container.value.scrollTo({ top: window.innerHeight * newIndex, behavior: "smooth", }); } } }; // 生命周期钩子 onMounted(() => { window.addEventListener("wheel", handleWheel, { passive: false }); window.addEventListener("keydown", handleKeyDown); container.value.addEventListener("touchstart", handleTouchStart); container.value.addEventListener("touchend", handleTouchEnd); }); // onUnmounted(() => { // window.removeEventListener('wheel', handleWheel) // window.removeEventListener('keydown', handleKeyDown) // container.value.removeEventListener('touchstart', handleTouchStart) // container.value.removeEventListener('touchend', handleTouchEnd) // }) </script> <style scoped lang="scss"> .scroll-container { height: 100vh; overflow-y: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; } section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; scroll-snap-align: start; transition: background-color 0.5s ease; position: relative; background-size: 100% 100%; background-repeat: no-repeat; } .bg1 { background-image: url("./img/bg1.png"); } .bg2 { background-image: url("./img/bg2.png"); } .bg3 { background-image: url("./img/bg3.png"); } .bg4 { background-image: url("./img/bg4.png"); } .bg5 { background-image: url("./img/bg5.png"); } .title { font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi; font-weight: 500; font-size: 80px; color: #e1e1e1; text-align: left; font-style: normal; text-transform: none; } .content { font-family: Adobe Heiti Std; font-size: 14px; color: #ffffff; line-height: 30px; text-align: justifyLeft; font-style: normal; text-transform: none; } .section-one { width: 100%; display: flex; justify-content: space-around; align-items: center; .content { width: 25%; } } .section-two { width: 30%; position: absolute; right: 150px; bottom: 180px; .content { margin-top: 60px; } } .section-three { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; .content { width: 600px; margin-top: 50px; } } .section-four { width: 100%; display: flex; justify-content: space-around; .title { font-size: 100px; font-weight: 700; margin-top: 100px; } .content { width: 600px; margin-top: 50px; } } .section-five { width: 100%; display: flex; justify-content: space-around; position: relative; .title { position: relative; margin-top: 500px; } .content { position: relative; margin-bottom: 200px; width: 600px; } } .scroll-indicator { position: absolute; bottom: 2rem; animation: bounce 2s infinite; opacity: 0.7; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } /* 最后一个区块不显示指示器 */ section:last-child .scroll-indicator { display: none; } /* 响应式设计 */ @media (max-width: 768px) { h1 { font-size: 2rem; } p { font-size: 1.2rem; } } </style> 在页面右侧添加类似轮播图指示的圆点
07-10
在 Vue 页面中实现右侧垂直滚动导航圆点指示器并结合单页多屏滚动效果,通常需要使用 `scroll` 事件监听页面的滚动位置,并根据滚动位置动态更新当前激活的圆点。以下是实现方案和示例代码。 ### 实现思路 1. **HTML结构**:创建一个包含多个“屏”的容器(如 `<section>`),以及一个用于显示导航圆点的侧边栏。 2. **CSS样式**:为每“屏”设置固定高度,确保内容可滚动;导航圆点固定在页面右侧。 3. **Vue逻辑**:监听滚动事件,计算当前可视区域对应的“屏”,并更新圆点状态。 ### 示例代码 #### HTML 结构 ```html <template> <div class="page-container" @scroll="handleScroll"> <!-- 多屏内容 --> <div class="sections"> <section v-for="(section, index) in sections" :key="index" :ref="'section' + index" class="section"> <h1>Section {{ index + 1 }}</h1> </section> </div> <!-- 右侧导航圆点 --> <div class="nav-dots"> <div v-for="(dot, index) in sections" :key="index" class="dot" :class="{ active: activeIndex === index }" @click="scrollToSection(index)" ></div> </div> </div> </template> ``` #### CSS 样式 ```css .page-container { position: relative; height: 100vh; overflow-y: scroll; } .sections { height: 300%; } .section { height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 2em; border-bottom: 1px solid #ccc; } .nav-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; } .dot { width: 10px; height: 10px; background-color: #999; border-radius: 50%; cursor: pointer; transition: background-color 0.3s; } .dot.active { background-color: #333; } ``` #### Vue 逻辑 ```javascript <script> export default { data() { return { sections: [1, 2, 3], // 假设有三屏内容 activeIndex: 0, }; }, methods: { handleScroll() { const scrollTop = this.$el.scrollTop; const sectionHeight = window.innerHeight; // 计算当前处于视口中的 section 索引 const index = Math.floor(scrollTop / sectionHeight); this.activeIndex = Math.min(index, this.sections.length - 1); }, scrollToSection(index) { const section = this.$refs['section' + index][0]; section.scrollIntoView({ behavior: 'smooth' }); }, }, }; </script> ``` ### 功能说明 - 每个 `<section>` 占据一整屏,通过 `scrollTop` 和 `window.innerHeight` 的比值判断当前位于哪一屏。 - 导航圆点会根据滚动位置高亮当前所在屏。 - 点击圆点可平滑滚动至对应屏。 该方法实现了类似轮播图的单页多屏滚动效果,并在右侧提供了垂直导航圆点指示器。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值