文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

滑屏 H5 开发实践九问 - 腾讯ISUX

滑屏的交互形式自从在 H5 中流行起来，便广泛应用在产品宣传、广告、招聘和活动运营等场景中，作为微信朋友圈广告惯用的形式，其影响力更是得到了强化与放大。如今滑屏H5可谓玲琅满目，数不尽数。...第一问：拖拽翻屏，还是滑动翻屏？ ? ? 页面随手势拖拽后翻屏 ? ?...而且从第一种方案切换到第二种时，交互上的微妙改变并没有带来直观的影响。所以从性能角度上，滑动翻屏自然是最佳的选择。 第二问：滑屏技术的最佳实现方式是什么？ ?...然而目前不管是手 Q 或是微信，都存在一个偶现的 bug：在手机中切换页面或者回到主屏幕，H5 的背景音乐依旧在播放，除非杀掉进程。初步猜测为 Webview 未正确得到释放。...不一而足，无法穷举，滑屏只是一种形式，内容才是 H5 的精华所在，切勿舍本逐末。

4.6K81

滑屏 H5 开发实践九问 - 腾讯ISUX

滑屏的交互形式自从在 H5 中流行起来，便广泛应用在产品宣传、广告、招聘和活动运营等场景中，作为微信朋友圈广告惯用的形式，其影响力更是得到了强化与放大。如今滑屏H5可谓玲琅满目，数不尽数。...第一问：拖拽翻屏，还是滑动翻屏？ ? ? 页面随手势拖拽后翻屏 ? ?...而且从第一种方案切换到第二种时，交互上的微妙改变并没有带来直观的影响。所以从性能角度上，滑动翻屏自然是最佳的选择。 第二问：滑屏技术的最佳实现方式是什么？ ?...然而目前不管是手 Q 或是微信，都存在一个偶现的 bug：在手机中切换页面或者回到主屏幕，H5 的背景音乐依旧在播放，除非杀掉进程。初步猜测为 Webview 未正确得到释放。...不一而足，无法穷举，滑屏只是一种形式，内容才是 H5 的精华所在，切勿舍本逐末。

4.9K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    H5 页面 iPhoneX 刘海屏适配

    随着这两年苹果坚定不移的走刘海屏路线，Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题，今天就记录一下我关于刘海屏适配的部分经验。...safe-area.png 很明显，在讨论适配之前，我们的页面一般有两种分类： 1、H5 页面使用原生 App 的 Navigation Bar 导航栏，此时，status bar 状态栏和导航栏都是原生控件...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。...页面适配 在为页面适配刘海屏之前，我们首先得在页面的 meta 中添加一个新的值：viewport-fit=cover 屏手机展示的任何样式。

    5.4K40

    fullpage.js横屏多页面切换

    fullpage.js是一款切换效果插件，支持主流浏览器与ie8+，网上的示例多是纵向切换，但是横向切换示例较少，翻看了一下api文档，调用moveTo方法，即可切换至任意纵向任意横向的分屏中，先看下效果...这里没有使用默认导航栏，而是自定义的切换按钮，更加灵活方便，便于修改，页面也使用的是iframe嵌套，官方示例中多是图片背景切换，没有太大的价值，切换代码很简单，首先引用fullpage.js和...jquery，页面初始化隐藏默认的横向切换组件，然后对切换按钮事件进行绑定，调用api即可 $(function () { $('#content').fullpage({...this).parent('li').addClass("active"); }) }) }); 示例代码地址：FullPage横屏切换示例...: FullPage横屏切换示例

    2.1K40

    单屏页面响应式适配玩法

    把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。...，PC 端适配一个 PC 端页面。...贴个录制的视频~ 所以，单屏页面最好页面内容言简意赅，设计层面倾向于水平垂直都居中的情况，是最适合做好这个页面的，并且在各种尺寸变化的情况下能比较良好地展示UI，且开发成本也比较合理。...300 ÷ (720 ÷ 100) ≈ 41.666 比如设计稿为 1920x1080（单屏设计高度应该更小一点，如适配第一节所说），可以写个 CSS 预处理函数，这样方便直接使用设计稿的尺寸，以 Sass...so… 对于我们的页面选择 vh 一举两得，不用写很多 rem 匹配，也不会出现溢出的问题。

    2.6K20

    【HarmonyOS NEXT】鸿蒙应用如何进行页面横竖屏切换以及注意事项，自动切换横竖屏，监听横竖屏

    【HarmonyOS NEXT】鸿蒙应用如何进行页面横竖屏切换以及注意事项，自动切换横竖屏，监听横竖屏一、鸿蒙应用如何进行页面横竖屏调用API手动切换1.首先要在EntryAbility 中获取主窗口对象...当然此处实现方式因人而异，你可以放在单例里，或者localstore中等等 globalThis.windowClass = windowStage.getMainWindowSync();...('pages/RotationTestPage', (err) => { if (err.code) { return; } }); }}之后在需要调用横竖屏切换的页面或者逻辑中调用...Componentstruct RotationTestPage { private TAG: string = "RotationTestPage"; onClickRotation = ()=>{ // 设置横竖屏状态...Cause: ' + JSON.stringify(exception)); } } build() { RelativeContainer() { Text("点击切换为横屏

    1.6K00

    折叠屏 ② | 华为资深专家深入解读折叠屏单页面布局设计

    单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时 在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中，为开发者详细讲解了应用基础体验要求...今天的文章，我们一同来聊聊应用迁移到折叠屏设备时，单页面布局设计中应重点关注哪几种拥有持久生命力且表现优秀的布局方式？...二 单页面布局设计 折叠屏展开态下屏幕宽度变宽，为用户提供了高效便捷的使用体验。动态布局是一种针对设备宽度变化而进行界面版面优化重排的有效变化方式，能够提供良好的体验。...例如（应用市场，音乐等模块） 为保证用户在折叠屏不同形态切换时体验的连续性，是需要在系统交互上做很多设计与考量的。...无论折叠屏设备是折叠还是展开，单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。 ·END·

    2.4K20

    横竖屏切换导致页面频繁重启？详细解读 screenLayout

    那么orientation就是对应着横竖屏切换，keyboardHidden则是软键盘弹出，screenSize则是屏幕尺寸改变。...通过与mask运算获取四个属性后对比发现，横竖屏切换后SCREENLAYOUT_LONG_NO变成了SCREENLAYOUT_LONG_YES。...为什么应用会重启，这是因为我们的应用架构是单Activity的，页面由fragment承载。...当从详情页打开上课页面时，会通过代码手动将竖屏切换到横屏（同时为了返回详情页时换回竖屏，在详情页手动切换回竖屏）。...这时候Activity重启并以横屏状态恢复所有fragment，但是恢复详情页时候，又切换到竖屏，所以又重启；然后以竖屏状态恢复到上课页面，又进行了切换，于是死循环，最后系统将应用重启。

    4K30

    干货 | 10个案例告诉你，数据如何驱动产品设计

    下例的H5小游戏里，用户先进入一个地图首页，点击“开始游戏”会跳转到游戏页面，再进行性别选择和操作提示，最后才到达游戏。每一步的操作都有部分用户流失。 按钮的点击量受页面层级影响。...5、用户会按照习惯操作页面，但自学能力强。 下例的H5小游戏开始前有操作方法提示，玩法是晃动手机（像控制真车方向盘一样）控制小车左右移动躲避障碍物。...6、用户习惯滑动切换，不喜欢向左的点击。 下例H5专题页面，用户可以手势滑动切换游戏，也可以点击下面的导航切换游戏。93%的用户选择手势滑动，只有7%的用户选择点击导航。...下例H5专题页面，用户可以点击左右按钮或者手势滑动来360°查看新车。所有手势中，左点击只有10.1%，右点击有41.3%，手势滑动占48.6%。 7、有行为触发的icon要设计的足够醒目易懂。...下例H5小游戏在开始前会进行一段动画，部分用户在动画过程中就开始点击页面。右图是游戏界面，点击“射门”按钮射门，但是有15%的用户会先点击移动的人头（好有趣啊- -//）。

    82730

    如何用数据看用户行为，驱动产品设计

    下例的H5小游戏里，用户先进入一个地图首页，点击“开始游戏”会跳转到游戏页面，再进行性别选择和操作提示，最后才到达游戏。每一步的操作都有部分用户流失。 按钮的点击量受页面层级影响。...5、用户会按照习惯操作页面，但自学能力强。 下例的H5小游戏开始前有操作方法提示，玩法是晃动手机（像控制真车方向盘一样）控制小车左右移动躲避障碍物。...6、用户习惯滑动切换，不喜欢向左的点击。 下例H5专题页面，用户可以手势滑动切换游戏，也可以点击下面的导航切换游戏。93%的用户选择手势滑动，只有7%的用户选择点击导航。...下例H5专题页面，用户可以点击左右按钮或者手势滑动来360°查看新车。所有手势中，左点击只有10.1%，右点击有41.3%，手势滑动占48.6%。 7、有行为触发的icon要设计的足够醒目易懂。...下例H5小游戏在开始前会进行一段动画，部分用户在动画过程中就开始点击页面。右图是游戏界面，点击“射门”按钮射门，但是有15%的用户会先点击移动的人头（好有趣啊- -//）。

    1.1K30

    实战文章！超实用！教你如何利用数据「分析用户行为，完善产品设计」

    页面层级越深，蹦失率越大。 跟PC情况相似，用户触达率随着页面层级加深而减小。下例的H5小游戏里，用户先进入一个地图首页，点击“开始游戏”会跳转到游戏页面，再进行性别选择和操作提示，最后才到达游戏。...用户会按照习惯操作页面，但自学能力强。 下例的H5小游戏开始前有操作方法提示，玩法是晃动手机（像控制真车方向盘一样）控制小车左右移动躲避障碍物。...用户习惯滑动切换，不喜欢向左的点击 下例H5专题页面，用户可以手势滑动切换游戏，也可以点击下面的导航切换游戏。93%的用户选择手势滑动，只有7%的用户选择点击导航。...下例H5专题页面，用户可以点击左右按钮或者手势滑动来360°查看新车。所有手势中，左点击只有10.1%，右点击有41.3%，手势滑动占48.6%。 有行为触发的icon要设计的足够醒目易懂。...下例H5小游戏在开始前会进行一段动画，部分用户在动画过程中就开始点击页面。右图是游戏界面，点击“射门”按钮射门，但是有15%的用户会先点击移动的人头（好有趣啊- -//）。

    1.1K80

    腾讯 VasSonic 框架，让你的 H5 页面首屏秒开

    为了提升用户体验和业务用户留存率，我们很多业务一开始通过Web开发，等页面模型验证符合预期后，再将H5页面转化成原生界面。...所以后来团队改了切入方向，安排人力专心研究如何加快页面打开速度，经过了一系列的摸爬滚打和优化探索，最终我们研发出了VasSonic框架，让H5页面首屏达到秒开，给用户一个更好的H5体验。...手Q上大部分的业务还是基于H5开发的，大家对手Q的业务形态可能有简单的了解。比如游戏分发中心、会员特权中心、个性化装扮商城等。...为了优化首屏体验，大部分主流的页面都会在服务器端拉取首屏数据后通过NodeJs进行渲染，然后生成一个包含了首屏数据的Html文件，这样子展示首屏的时候，就可以解决内容转菊花的问题了。...当然这种页面“直出”的方式也会带来一个问题，服务器需要拉取首屏数据，意味着服务端处理耗时增加。

    4.7K80

    H5玩法知多少

    单屏滚动 公司主页、产品介绍、报告总结、邀请函等展示类场景 手势操作 商品图片放大查看场景、图片拖拽/旋转等编辑场景、手势解锁、拼图游戏 基于画面呈现： 类别 玩法或适用场景 视频/动画展示 产品、...基于触摸屏操作： 除了利用传感器创造特别的玩法外，在触摸屏上的操作也有多种玩法，如单屏滚动、手势操作、全景交互及多屏互动。...翻屏时可以加上一些转换的动画，如渐入渐出，使得翻页效果生动不单调，也可以加上重力感应，让手机在转动时产生视差效果。单屏滚动的应用场景比较广泛，很多主页、产品介绍、报告总结、邀请函都应用了这种形式。...案例： 腾讯互娱发布会邀请函： 邀请函采取单屏滚动的形式展示，同时利用重力感应，转动手机时会看到页面上的装饰图片也会跟着移动，制造视差，增添了乐趣。 ? ? ?...手势操作可用于放大查看图片、对图片进行拖拽/放大/旋转等编辑、手势解锁、也可以用于游戏上，如拼图游戏时拖拽、旋转拼图碎片。 在实现上，H5有一个手势操作库hammer.js，可以实现常用的手势操作。

    3.6K41

    腾讯祭出大招 VasSonic，让你的 H5 页面首屏秒开！

    为了提升用户体验和业务用户留存率，我们很多业务一开始通过Web开发，等页面模型验证符合预期后，再将H5页面转化成原生界面。...所以后来团队改了切入方向，安排人力专心研究如何加快页面打开速度，经过了一系列的摸爬滚打和优化探索，最终我们研发出了VasSonic框架，让H5页面首屏达到秒开，给用户一个更好的H5体验。...手Q上大部分的业务还是基于H5开发的，大家对手Q的业务形态可能有简单的了解。比如游戏分发中心、会员特权中心、个性化装扮商城等。...为了优化首屏体验，大部分主流的页面都会在服务器端拉取首屏数据后通过NodeJs进行渲染，然后生成一个包含了首屏数据的Html文件，这样子展示首屏的时候，就可以解决内容转菊花的问题了。...当然这种页面“直出”的方式也会带来一个问题，服务器需要拉取首屏数据，意味着服务端处理耗时增加。

    3K00

    Demoo使用秘籍，比好用更好用 - 腾讯ISUX

    设置页面滑动手势 涉及技巧：双击手势区域，快速设置手势热点 大屏幕手机越来越泛滥的时候，手势滑动成为一个很常见的操作，Demoo也可以模拟手势操作哦！...如图所示页面左边的一排手指，就是用来设定手势的，从上到下分别对应左滑、右滑、上滑、下滑的手势操作，可以根据需要选择。...双击手势，即可出现和热区尾巴一样的蓝色连接线，在对应需要停留的页面点击即可完成手势操作的设定，完成后，手指变成蓝色，示意有手势操作。图中，我给了这个页面一个右滑返回到首页的操作，模拟手势返回。 ?...Step5.建立页面切换方向，打磨细节 涉及技巧：鼠标停留在切换示意区，预览动画效果 真实的app中，页面间常常通过方向来示意层级关系，例如重新创建的流程，通常创建页面会从底部向上呼起，于是，在建立热区链接过程时...点击屏幕右侧的设置，上传好app图标和闪屏之后，用手机QQ扫二维码打开页面，然后用分享在safari中打开链接，在safari中设置分享到屏幕，于是，大功告成，你可以从桌面打开这个app了！

    2.3K40

    EasyNVR H5无插件直播方案前端架构之：直播页面和视频列表页面切换的问题

    关于直播页面和视频列表页面切换 为了给用户更好的用户体验，并且更好的让用户快速简洁的了解实时的视频直播信息。一般多会分为列表展示和实时的视频直播展示。 ? ?...因此在进行两个视图之间的切换的时候，不仅需要考虑外表视图的变化，更应该注意到视频流的关闭；当我需要在实时四分屏视图向列表视图进行切换的时候，需要将当前四分屏视图中所有的视频流全部停掉。...为了保持初始播放器样式的统一，在四分屏播放页面每一次播放视频流时都是重新加载初始化videojs。...因此当需要进行切换到列表视图时需要判断当前四个播放窗口中，哪一个窗口正在进行视频播放，以便于在切换视图时将对应窗口的视频流停掉。...将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5

    1.4K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券