当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。
在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出后铺满了整个屏幕,其下方的dom结构依然可以滚动,这就是大家所说的“滚动穿透”。
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。
前段时间发布的OPPO Find X2,OPPO着重介绍了Find X2的屏幕, 其中Find X2屏幕有一个特性就是支持120Hz超高刷新率, 笔者也有一台Find X2,在日常使用中我能很容易感知滑动这块屏幕带来顺滑和流畅体验, 而本文通过使用PerfDog移动平台性能测试软件测得的帧率数据,让大家更直观的知道Find X2这块屏幕顺滑体验到底有多棒。
问题描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样,看起来很怪异。例如下图,左图是正常所期待的输入框光标,右边是IOS的 input 光标。
到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点!
大家都知道,在PC端有着微软称霸,而移动端的就是安卓比较牛逼,但是PC端和移动端却是各管各的,互不干扰互不相通。
上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果,但有时候在上下滑动的中间需要有左右滑动的效果,那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果,来看一下代码。
在使用UGUI的Scroll View组件过程中,我们会遇到只需要上下滑动,而不需要左右滑动的时候
向右滑动返回,对于屏幕过大的手机来说,在单手操作时,是一个不错的用户体验,用户不必再费力的或者用另一个手去点击屏幕左上角的返回按钮或者,手机右下角的返回按钮,轻轻向右滑动屏幕即可返回上一页,这个功能如今大部分APP都已经支持啦,你的APP支持了吗?
上篇文章记录了小程序的自定义导航栏的实现过程和小程序基础组件 cover-image 中 使用 fiexd 失效的坑。 前天突然在qq上看到一个学妹在群里@我问我小程序怎么实现左滑删除,今天正好周末有空,于是就在掘金上写了这篇文章。
我前几篇文章中我介绍过一种手机移动端上下滑动的效果,那个效果是通过zepto来实现的,今天我来介绍一种基于swiper实现手机端上下滑动的效果。我先来贴出body内的代码
在不知道这个属性之前,发现可以通过设置--status-bar-height(uni-app全局封装的变量)实现
一般禁止body滚动的做法就是设置overflow:hidden。但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。再进一步分析,如果要用class去实现没有滚动条,如下代码设置:
最近项目中需要用到滑动删除,然后去网上搜了一下,发现现有网上的各种解决办法各式各样,但是还是找不到一个能将所有细节和逻辑处理好的,至于滑动删除部分,我觉得处理的相对比较好的是 QQ(包括处理各种逻辑和细节);最终,苦寻无果,于是决定自己动手,丰衣足食
前言 本文源自实际开发中的需求,核心的要求有几个: 1、多个UITableview要支持左右滑动; 2、点击Tab也要有UITableview的滑动切换效果; 3、每个UITableview单独
上一章讲了后端部分的代码逻辑,传送门:在微信小程序上做一个「博客园年度总结」:后端部分
随着国内越来越多的厂商发布智能手表,而这些手表的系统基本上都是基于Android系统深度打造的,就拿OPPO Watch ECG版本来说,ColorOS Watch 1.5正是基于Android O深度定制的。我们可以把这些智能手表看做是一个小的智能手机,而PerfDog性能狗作为移动全平台性能测试分析专家,我们用PerfDog性能狗测试一下智能手表性能,能有什么样的收获?下面就以OPPO Watch ECG版本为例,进行进一步测试。
早先和大家分享过通过封装adb命令进bat脚本的方式进行简易的自动化性能评测,如内存监控、CPU监控等,以滚屏的形式进行数字播报,前段时间经介绍接触了一款性能测试软件:PrefDog,可以更加全面的记录、监控手机/App性能。bat脚本可以进回收站啦!
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体。随着一些运营商推出大王卡等
微信内网页不可使用 local/sessionStorage 储存,因为它只是一个 webview 组件,并不是一个浏览器。 但是我们可以使用 cookie 储存的方式
在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
在做聊天页面的时候 用到了表情,这个位置没有做左右轮播滑动效果,就直接做了上下滑动,但是上下滑动的话 会导致外部的页面也跟着滑动,所以就写了个方法:@touchmove.stop =""
使用TextureView替换SurfaceView实现VideoView,因为TextureView是直接继承View的,并且在ListView中滑动的时候,也不会在滑动的时候,有残留(看起来像是普通的View绘制和SurfaceView的绘制是两套)
抖音相信大家都玩过,母上大人也沉迷其中,她玩的是抖音短视频,每天看几分钟有点金币兑换钱,看着她每天刷来刷去就想着这个是否可以实现自动刷抖音了,故研究了一下安卓的adb功能正好可以模拟人手来实现自动的刷手机,类似之前的电脑端的pyautogui功能,故分享这个文章。
在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好。像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常满足不了需求。同时如果输入框特别多的情况下,点击输入时,当前输入框没被挡住,但是当前输入框下面的输入框却无法获取焦点,必须先把键盘收起,再去获取下面输入框焦点,这样用户体验也非常不好,那有什么办法呢? 系统的adjustResize和adjustPan有什么区别,他们使用时的注意事项,有什么系统要求及蔽端呢?
还记得小安之前跟大家说不用下载app,就可以直接在手机上运行的谷歌的黑科技吗?最近它小试牛刀,弄出了一款没有广告、信息流按照时间排列的渣浪微博PWA版。 目前是 beta 版本测试,访问入口也很简
抖音首页右滑可进入“个人中心”页面,对于首页日活上亿的 APP 来说,这个页面的pv理论上应该不会太小。但是某些时候在此页面会出现滑动冲突的小问题,不太利于用户体验,通过反复的把玩测试,找到了必现的操作,作为一个资深的抖迷和一个非资深的 Android 开发的我,产生了钻牛角尖的想法—想看看问题是怎么产生的,以及有没有可优化的方案。
导语 | 疫情后的第三年,也是数字化转型按下加速键的第三年。在这三年里,唯一没有停下脚步的是技术的更新换代,也引发了国内外对工作模式的重新审视。Work from home 的远程办公模式,已经开始在国外流行,在国内也受困于疫情影响开始有了多轮实践。面对新兴办公模式的转变,相信技术管理者都在思考一个问题:远程办公模式到底是使团队管理变得更简单还是更复杂?本次我们别开生面地设置了一场线上辩论——《远程办公时代下,团队管理变与不变》,希望正反双方的思想交锋,能为你拨开迷雾。
这里是「国家队」栏目的第 1 期。 在微信小程序的服务范围中,「政务民生」是一个不容忽视的大类。这预示着,未来只要用手机,就能处理大量公关事务,享受公共服务。 目前,有哪些「国家队」小程序入场了呢?只要关注本栏目,每周都能获得一款优质推荐。 小程序体验师:李宁 最近,正是「两会」召开期间。 这两个高居庙堂的大会,看似离我们很遥远,实则讨论都是关乎国计民生的大事,与每个人的生活息息相关。 而作为中国第一大报的「人民日报」,自然是我们了解原汁原味「两会」新闻的重要渠道。 本期,知晓程序(微信号 zxcx010
在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果,前面我介绍了一种手机端上下滑动效果,今天我来给大家介绍一种手机端左右滑动并且底部有圆点,实心的圆点随着图片的变化而移动。来看看代码吧
下面这个例子是一个非常典型的一个嵌套滑动的例子(scrollview嵌套webview)。需求也很简单:整个页面是需要上下滑动的,另外呢上面一部分的webview加载的全景视图也是需要能够自己左右滑动上下滑动的。下面请看效果图。
依稀记得Vue.js应用推出时,其代码的测试覆盖率就很高也是它的一大卖点,所以大家对Vue.js框架代码的质量就很放心,造就了前端框架三大台柱之一。
现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己总结出来的10个优秀的交互设计实例(APP, 网页),希望对你们有帮助。
现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己总
在音视频应用中通常可以通过上下滑动来调节屏幕亮度和音量大小,本例即为大家介绍如何实现上述UI效果。
微信小程序「我」的页面效果图与需求: 用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展
接下去应该是梳理一下 Android Tv 主界面实现原理及解析的一个系列博客了,大体上的安排是先介绍 Google 官方提供的 Leanback 库的使用,如何使用该库来实现简单的 Home 界面,然后再去分析 Leanback 主界面实现的相关源码,了解完 Google 是如何实现之后就可以扔掉 Leanback 自己来尝试实现,毕竟 Leanback 的可定制不高。
本文主要是记录自己在移动端开发中遇到的一些坑点或者总结(持续更新,有新的坑点会总结进来)
记得去年做一个聊天项目需要实现类似QQ的下拉刷新并且有侧滑删除的功能,在网上找了很久都没有QQ的完美,多多少少存在各种的问题,最后把下拉刷新的功能去掉后,只保留了侧滑删除的功能才找到个完美的。回去后和一朋友讨论,朋友找了以后说了一句,这种功能没有8K以上的是写不出来的(⊙﹏⊙)b。现在看来当时真的太天真了。而如今自己也没有8K还是尝试去写写,顺便当练练手。
之前给大家分享一份matlab绘图速查表《有了这张matlab绘图速查表,您还用担心matlab绘图吗?》,大家反响不错。今天再上干货猛料,给大家分享一个小编之前收藏的速查表汇总网站:cheat-sheets.org。该网站汇总300多种涵盖不同编程语言、脚本语言、系统软件等领域的速查表,内容非常全面。
今天我们就来介绍一下如何使用 Axure 进行滑动页面的设计。滑动页面分为两种,分别是垂直滑动和水平滑动;垂直滑动就是上下滑动;水平滑动就是左右滑动。
今天项目中需求是写出一个很简单的edittext输入框,但要求当输入字数过长时需要上下滑动以便查看所有文字,因为页面底部有一个”确定”的button,但刚开始输入框内的问题怎么都滑动不了,我一开始就想到了这是事件传递冲突问题,但试了很多种方法都不行,最后也是一个一个试才解决的,不多说,贴代码:
概述 本文讲述在mui框架下实现上下滑动控制显隐的效果。 效果 实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
在开发的时候,我们需要一个既能翻页又能上下滑动的界面,这时候就会遇到翻页容器和滚动容器触摸冲突的情况。以下是博主这里的解决方法。
建议不用 layui。layui 在有些情况下定位元素是有问题的。在环境基本上是正确的情况下,它截图截不到。所以可以舍弃 layui,直接用自带的 uiautomatorviewer(现在拥有的定位方式,它全部都支持)。
领取专属 10元无门槛券
手把手带您无忧上云