仅在屏幕尺寸> 720时触发滚动功能 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【玩转嵌入式屏幕显示】（六）ST7789 SPI LCD硬件垂直滚动功能的使用

一、想法萌生小熊派开发板的 LCD 小屏幕使用是ST7789驱动IC，之前一直有在该块屏幕上实现滚动显示的想法，最初构想在MCU侧创建一个大的队列，将整个屏幕显示内容交由队列管理，然后不停的去整屏刷新以实现屏幕滚动...滚动？发现新大陆！根据手册中的8.14章节描述，旋转滚动仅仅是垂直滚动的一种模式，由垂直滚动区域定义指令（0x33H）和垂直滚动起始地址指令（0x77）决定。...原来我一直想做的功能，ST7789竟然硬件支持，研究研究如何实现，开干！二、实现过程 1....设置滚动区域小熊派板载LCD屏幕的大小是240240，水平和垂直都有240个像素点，但是ST7789驱动IC的显存大小为320240，垂直有320行像素点，水平有240行像素点，平常我们只是用到了显存的前面一部分...设置滚动显示起始地址设置滚动显示起始地址的作用为：设置LCD屏幕从显存的哪行开始显示，示例如下图，图中TFA=BFA=0、VSA=320，如果将滚动显示起始地址设置为3，则LCD屏幕显示内容将会从第3

6.3K4 0

用最少的代码却实现了最牛逼的滚动动画！

插件简介ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。通过ScrollTrigger使用最少的代码创建令人叹为观止的滚动动画。...我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~插件特点将任何动画链接到特定元素，以便它仅在视图中显示该元素时才执行该动画...嵌入滚动直接触发到任何 GSAP 动画（包括时间线）或创建独立实例，并利用丰富的回调系统做任何您想做的事。高级固定功能可以在某些滚动位置之间锁定一个元素。灵活定义滚动位置。支持垂直或水平滚动。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active"使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器1

3.1K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

用最少的代码却实现了最牛逼的滚动动画！

插件简介 ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。通过ScrollTrigger使用最少的代码创建令人叹为观止的滚动动画。...以便它仅在视图中显示该元素时才执行该动画。...嵌入滚动直接触发到任何 GSAP 动画（包括时间线）或创建独立实例，并利用丰富的回调系统做任何您想做的事。高级固定功能可以在某些滚动位置之间锁定一个元素。灵活定义滚动位置。支持垂直或水平滚动。...在滚动记录器处于活动状态时，如将active类添加到触发元素中：toggleClass: "active" 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。...start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束 scrub: 1, // 触发器

2.7K2 0

微信小程序开发学习笔记（二）——小程序框架、组件、WXML

为了方便开发人员适配各种屏幕WxSS 中加入了新的尺寸单位 rpx 即（responsive pixel，响应式像素)。...rpx 说明 rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx 100% 屏幕的宽度 = 750rpx rpx响应单位 rpx是微信小程序独有的，解决屏幕自适应的尺寸单位...可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配 rpx 和 px之间的换算在普通网页开发中...2.7.3 scroll-anchoring boolean false 否开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS.../左边时触发 1.0.0 bindscrolltolower eventhandle 否滚动到底部/右边时触发 1.0.0 bindscroll eventhandle 否滚动时触发，event.detail

2K4 0

mini DSO STC15 开源示波器

旋转编码器：水平滚动波形（在暂停采样状态下有效）按下同时旋转编码器：垂直滚动波形（仅在暂停采样状态下有效）设置界面：单击编码器：无效...500ms", "200ms", "100ms", "50ms", "20ms", "10ms","5ms", "2ms", "1ms", "500us", "200us", "100us" (100us仅在自动触发模式下可用...) 纵轴电压区间：设定电压量程上限，最大30V，顺时针旋转编码器将电压上限设置为0则进入自动量程，逆时针旋转进入手动量程触发值：设定触发电压值，触发位置被放在屏幕中心...，触发点位于屏幕中心，触发失败则波形无规律滚动，屏幕左侧显示Fail标志 Normal(普通触发)：等待预采样，待指示灯亮起表示预采样结束，这时可以输入信号；...触发成功后，显示波形，并停止采样，需用户单击编码器开始下次采样需注意设置正确的触发值，否则一直处于等待触发状态，屏幕不会显示波形

1.2K3 0

「大众点评点餐」小程序开发经验 03：事件联动

结合上面的图片，菜单页的结构的交互需求很容易就整理出来了：顶部要求显示商家名称，有分享功能。下方左侧、右侧可分开滚动，滚动左侧不影响右侧，滚动右侧左侧随之联动高亮显示所在的菜单分类。...点击下方左侧导航菜单栏，高亮显示被点击的菜单分类，下方右侧对应分类详情模块顶部与右侧滚动区的顶部重合（类似于 HTML 里的锚点功能）。...当高亮的导航菜单在左侧 scroll-view 滚动区可视区下方，将高亮导航菜单滚动到屏幕中央区域。顶部下方可能会出现黄条提示文案模块。底部上方可能会出现购物车模块。...从产品兼容性角度出发，我们考虑使用微信小程序的 rpx 作为 UI 设计的标准尺寸。该尺寸和 rem 非常类似，不同点在于其对基准尺寸的设定。...rem 使用文档根元素设定的尺寸作为基准尺寸，而 rpx 使用手机屏幕宽度为基准，决定 1 rpx 对应的宽度，该动态尺寸对设备的兼容性更加友好。

2.6K4 0

微信小程序优化uni-app

onHide 当uni-app从前台进入后台 css, less/scss等资源同样不要放在static目录下 onUniNViewMessage 对nvue页面发送的数据进行监听应用生命周期仅在...页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 onReady 监听页面初次渲染完成注意如果渲染速度快，会在页面进入动画完成前触发 onHide 监听页面隐藏 onUnload 监听页面卸载...onResize 监听窗口尺寸变化 onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 onReachBottom 页面上拉触底事件的处理函数 onTabItemTap 点击...tab 时触发，参数为Object onShareAppMessage 用户点击右上角分享 onPageScroll 监听页面滚动，参数为Object onNavigationBarButtonTap...image.png onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面，如果是点击不同的tabitem，一定会触发页面切换。

2.7K1 0

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

、发射（功能）和改变锚点。...浮动操作按钮有两种尺寸: ·默认大小：对于大多数用例。 ·最小尺寸：只用于创建与其他屏幕元素的视觉连续性。...这可以防止： ·悬浮响应式按钮在不在屏幕时显示功能 ·悬浮响应式按钮与内容海拔相同的感觉 ---- 变换变换浮动操作按钮是app中主要用例的特别示例。...触发悬浮响应式按钮可以简单地触发动作或在某处导航。触摸波动的动画向外扩展导致UI变化。工具栏浮动动作按钮可以在按下时变换成工具栏。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。

5.8K9 0

Day3：Github项目每日优选之react-use

useMouseWheel — 跟踪滚动鼠标滚轮的 deltaY。 useNetworkState — 跟踪浏览器网络连接的状态。 useOrientation — 跟踪设备屏幕方向的状态。...usePageLeave — 当鼠标离开页面边界时触发。 useScratch — 跟踪鼠标点击和滑动状态。 useScroll — 跟踪 HTML 元素的滚动位置。...useScrolling — 跟踪 HTML 元素是否正在滚动。 useStartTyping — 检测用户何时开始输入。 useWindowScroll — 跟踪窗口滚动位置。...useWindowSize — 跟踪窗口尺寸。 useMeasure and useSize — 跟踪 HTML 元素的尺寸。...useRafState — 创建仅在 requestAnimationFrame 之后更新的 setState 方法。

1.7K3 0

第134天：移动web开发的一些总结（二）

力求页面简单，做如下处理： ① 同比例缩减元素尺寸 ② 调整页面结构布局 ③ 隐藏冗余的元素经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能。...border：0.5px；（错误），仅仅ios8可以使用通用方案：scaleY（0.5）（3）相对单位rem 为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性...touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会出发） touchmove：手指在屏幕上滑动，连续触发 touchend：手指离开屏幕时触发 touchcancel：系统取消touch时候触发...(3) 弹性滚动，下拉刷新 ①弹性滚动：当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。...局部滚动：没有弹性滚动，没有滚动惯性，不流畅。

1.8K1 0

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。...，如果设置为 1 则会转换所有大小的像素值 } } } 注意：以上 rootValue 的设置值是基于设计稿的尺寸。...content="no-cache, no-store, must-revalidate"> ⭐️⭐️禁止字母大写：禁止字母大写功能和自动纠正功能....container { overscroll-behavior: contain; } ⭐️⭐️禁止屏幕抖动通过提前声明滚动容器的padding-right为滚动条宽度，可以防止滚动条的出现导致屏幕抖动...// 恢复滚动位置 window.scrollTo(0, scrollTop); } // 示例使用，当某个事件触发时禁止滚动穿透 function disableScrollEvent() {

9042 1

【软件开发规范七】《Android UI设计规范》

基础常识 1.1 主流屏幕尺寸 1.2 图标尺寸 1.3 颜色值 1.4 标注 1.5 切图 2....基础常识 1.1 主流屏幕尺寸标识屏幕尺寸 hdpi 480 * 800 xhdpi 720 * 1280 xxhdpi 1080 * 1920 1.2 图标尺寸标识启动图标尺寸菜单图标尺寸...编辑编辑靠近屏幕边缘时，位置可适当错开。编辑菜单过长时，需要显示滚动条。编辑菜单从当前选项固定位置展开，不要跟随点击位置改变。 ...鼠标悬停、获得焦点、手指长按都可以触发提示。编辑触摸提示（左）和鼠标提示（右）的尺寸是不同的，背景都带有90%的透明度。 ...手机端的侧边抽屉距离屏幕右侧56dp。编辑侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

5.1K2 0

Pinterest：Android系统上的视频管理

包括支持在每个屏幕上同时播放多个视频，并且通过滚动出屏幕自动暂停播放的方式来动态地控制视频的播放状态以及同时播放的视频数量。...在常见情况下，由于VideoManager保留对所有活动视频的引用，因此我们可以跟踪视图的确切坐标（即getLocationInWindow（））和设备的屏幕尺寸（以像素为单位）（请参见DisplayMetrics...我们还通过以下方式处理重叠的UI组件：向消费者提供包括一系列``障碍物’'视图的选项，这些视图可能会覆盖我们的基础视频（例如工具栏，浮动按钮等）显示弹出窗口的回调（即onWindowFocusChanged（））屏幕滚动组件或...这不仅在纸面上看起来不错，而且仅重构一项就删除了约4,500行代码（不到原始实现大小的1/3）展望建立适当的“视频管理”是一个漫长而艰巨的过程，但是多年来，我们已经构建了一些真正经过改进的东西，以帮助简化我们的开发流程和...LiveVideoStackCon 2019深圳讲师招募 12月13-14日，LiveVideoStackCon首次来到深圳，将全球前沿多媒体技术实践与深圳本地产业结合，触发技术与商业灵感。

1.1K6 0

挥别web移动端开发差异和经典坑

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...屏幕顶部会多出一块白色区域。...手指按住屏幕上拉，底部多出一块白色区域。安卓无此特性。在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...keyup、keydown事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup、keydown 事件非直接的文字输入(中文输入法)下，进行判断限制，仅在选词后触发...input事件描述：在使用oninput监控输入框内容变化时，我们期望仅在value值变化时，才触发oninput事件，而在中文输入下，未选词时的按键也会触发oninput事件。

2.9K2 0

小程序-比较数字大小

2.1 选择器 WXSS的选择器 2.2 尺寸单位微信小程序在WXSS中加入了新的尺寸单位rpx(responsive pixel, 响应式像素)。...移动端网页像素单位的换算难点在于它有物理像素和逻辑像素两种单位，物理像素是指屏幕上实际有多少个像素，而逻辑像素是指CSS中使用的像素单位。...为了换算方便，rpx单位规定了任何手机屏幕的宽度都为750rpx（逻辑像素），由小程序内部负责将逻辑像素转换为当前手机中的物理像素。...onReachBottomDistance主要用于开发自动加载更多的功能，就是当页面中内容非常长的时候，为了加快加载速度，并不是一次性加载所有的数据，而是先加载一部分数据将页面填满，直到出现滚动条，页面可以向上滚动...如果达到给定的值，就会触发上拉触底事件onReachBottom,在pages/index/index.js文件中可以找到该事件的处理函数。

2.6K1 0

动态网格图片展示中的自适应逻辑

首先，我们需要一个核心函数 calculatePerPage 来实现动态计算图片数的功能。它的工作原理如下：获取当前窗口的高度，用以计算网格的列数。结合容器宽度，计算每行能容纳的图片数量。...同时，在窗口尺寸发生变化时，该函数也会被再次触发，从而实时更新图片数量。动态监听窗口变化为实现动态调整，resize 事件是关键。...实际应用中的细节处理在真实项目中，动态计算的逻辑需要与图片加载和滚动监听结合。...$el; // 判断滚动条是否接近底部 if (!...总结通过动态计算每页图片数与监听窗口尺寸变化，我们为图片网格展示创建了一个高度自适应的逻辑模块。这种设计不仅能够适配各种屏幕，还能提升页面加载效率，减少不必要的资源浪费。

801 0

一段代码，如何解决图片懒加载的优雅需求？

为此，我们需要为滚动事件添加触发阈值。...$el; // 当滚动位置接近底部 200px 时，触发加载逻辑 if (!...思路的扩展：为体验注入灵动动态调整 perPage 用户使用不同设备时，屏幕尺寸和分辨率会有较大差异。因此，每页加载的图片数量也不应固定。...= window.innerHeight; // 屏幕高度 const itemsPerColumn = Math.floor(screenHeight / itemHeight); const.../ 根据容器宽度动态计算每行显示的图片数 : 1; this.perPage = itemsPerColumn * itemsPerRow; } 这个方法在页面初始化和窗口大小变化时触发

780 0

编写难于测试的代码的5种方式

由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?...在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。...620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。...由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2种尺寸适配。...的升级弹框中，在大屏幕下，列表的行距比较宽松，弹框尺寸为1100px(宽)x800px(高); 在小屏幕下，列表的高度则减小，弹框尺寸为1100px(宽)x630px(高)。

1.1K8 0

如何深入理解 JavaScript 中的懒加载

用户可以快速与可见内容交互，而无需等待屏幕外资源加载。 JavaScript中实现延迟加载的技术在JavaScript中，可以通过不同的方法实现延迟加载。...与预加载所有页面不同，延迟加载可以在用户滚动到当前页面末尾时获取和加载后续页面。具有资源密集型功能的网站，例如交互式地图、数据可视化和复杂动画，可以使用延迟加载来优化性能。...管理图像尺寸：在响应式设计中，懒加载图像在处理不同屏幕尺寸和分辨率时可能会变得具有挑战性。最佳实践开发人员应遵循最佳实践，以充分发挥JavaScript中的延迟加载的潜力。...可以使用占位图像或简单的占位符，比如具有定义尺寸和背景颜色的div元素，以保持布局直到实际内容加载完成。...虽然许多现代浏览器支持懒加载所需的功能和API，但旧版本的浏览器可能缺乏支持或功能有限。因此，开发人员必须注意他们想要支持的浏览器，并相应选择适当的技术。

3753 0

在设计了100个弹框之后，这些是我的心得

由于弹框与当下流行的卡片式设计在表现形式上十分接近，同时弹框也逐渐承载了更多功能性需求，不再是简单的内容堆砌，因此弹框设计正在被越来越多设计师关注。弹框尺寸怎么定?...在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率，如果你希望以一个尺寸适配所有屏幕分辨率，那可以参考以下数据。...620px以内，可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。...由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2种尺寸适配。...的升级弹框中，在大屏幕下，列表的行距比较宽松，弹框尺寸为1100px(宽)x800px(高); 在小屏幕下，列表的高度则减小，弹框尺寸为1100px(宽)x630px(高)。

1.6K9 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭