Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说,是一款不错的辅助工具,可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感,而且在节约时间,减少人力投入也有极大的帮助。
介绍 第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道,消息列表内,左滑单个聊天可以删除、置顶的操作。
在开发的时候,我们需要一个既能翻页又能上下滑动的界面,这时候就会遇到翻页容器和滚动容器触摸冲突的情况。以下是博主这里的解决方法。
上一章讲了后端部分的代码逻辑,传送门:在微信小程序上做一个「博客园年度总结」:后端部分
在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出后铺满了整个屏幕,其下方的dom结构依然可以滚动,这就是大家所说的“滚动穿透”。
介绍 第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道,消息列表内,左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。 [image] 实现原理 最外层一个view水平方向排列,里面包含一个内容区view,一个操作区view 让你要展示的布局充满屏幕,通过css样式让超出的删除按钮隐藏 监听touch事件,平移布局显示和隐藏删除按钮(列表每一项
当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。
最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。
问题描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样,看起来很怪异。例如下图,左图是正常所期待的输入框光标,右边是IOS的 input 光标。
随着微信平台的发展,微信公众号变的也相当火爆,成为了众多商家吸引大众眼球的一个基地。这些商家在这个平台上发布自己的活动,这些活动需要程序员来使用网页代码来实现,下面我来说一下微信平台上通过向上滑动屏幕实现整个页面变换的特效,先来看一下代码吧:
ListView是我们在开发Android程序时用得比较多的一种widget,通常用来展示多条数据,这里,我对ListView的一些功能点作一个简单介绍。
Safari下使用border-image,不能设置border-color: transparent。
上篇文章记录了小程序的自定义导航栏的实现过程和小程序基础组件 cover-image 中 使用 fiexd 失效的坑。 前天突然在qq上看到一个学妹在群里@我问我小程序怎么实现左滑删除,今天正好周末有空,于是就在掘金上写了这篇文章。
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对于页面的位置 screenX /screenY:// 触摸点相对于屏幕的位置 identif
到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们产品质量越来越高,web前端开发而言是一个挑战,是一个难题,也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验,就是这篇文章的主旨:移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑,如果大家有遇到什么别的坑,欢迎补充,或者觉得我哪里写错了,欢迎指点!
上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果,但有时候在上下滑动的中间需要有左右滑动的效果,那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果,来看一下代码。
最近项目中需要用到滑动删除,然后去网上搜了一下,发现现有网上的各种解决办法各式各样,但是还是找不到一个能将所有细节和逻辑处理好的,至于滑动删除部分,我觉得处理的相对比较好的是 QQ(包括处理各种逻辑和细节);最终,苦寻无果,于是决定自己动手,丰衣足食
在使用UGUI的Scroll View组件过程中,我们会遇到只需要上下滑动,而不需要左右滑动的时候
前段时间发布的OPPO Find X2,OPPO着重介绍了Find X2的屏幕, 其中Find X2屏幕有一个特性就是支持120Hz超高刷新率, 笔者也有一台Find X2,在日常使用中我能很容易感知滑动这块屏幕带来顺滑和流畅体验, 而本文通过使用PerfDog移动平台性能测试软件测得的帧率数据,让大家更直观的知道Find X2这块屏幕顺滑体验到底有多棒。
向右滑动返回,对于屏幕过大的手机来说,在单手操作时,是一个不错的用户体验,用户不必再费力的或者用另一个手去点击屏幕左上角的返回按钮或者,手机右下角的返回按钮,轻轻向右滑动屏幕即可返回上一页,这个功能如今大部分APP都已经支持啦,你的APP支持了吗?
前言 本文源自实际开发中的需求,核心的要求有几个: 1、多个UITableview要支持左右滑动; 2、点击Tab也要有UITableview的滑动切换效果; 3、每个UITableview单独
UIKit提供UIPageViewController可以很方便实现平移的页面切换效果,使用流程: 1、创建UIPageViewController;
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。
在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小。 双击缩放的原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,
在做聊天页面的时候 用到了表情,这个位置没有做左右轮播滑动效果,就直接做了上下滑动,但是上下滑动的话 会导致外部的页面也跟着滑动,所以就写了个方法:@touchmove.stop =""
抖音首页右滑可进入“个人中心”页面,对于首页日活上亿的 APP 来说,这个页面的pv理论上应该不会太小。但是某些时候在此页面会出现滑动冲突的小问题,不太利于用户体验,通过反复的把玩测试,找到了必现的操作,作为一个资深的抖迷和一个非资深的 Android 开发的我,产生了钻牛角尖的想法—想看看问题是怎么产生的,以及有没有可优化的方案。
在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrome51版本中。 Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址:https://www.youtube.com/watchv=65VMej8n23A 从效果对比视频中可以明显看到,使用Passive Event Listeners特性后,页面的滑动流畅度
在不知道这个属性之前,发现可以通过设置--status-bar-height(uni-app全局封装的变量)实现
在不久前的Google I/O 2016 Mobile Web Talk中,Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrom
下面这个例子是一个非常典型的一个嵌套滑动的例子(scrollview嵌套webview)。需求也很简单:整个页面是需要上下滑动的,另外呢上面一部分的webview加载的全景视图也是需要能够自己左右滑动上下滑动的。下面请看效果图。
在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
依稀记得Vue.js应用推出时,其代码的测试覆盖率就很高也是它的一大卖点,所以大家对Vue.js框架代码的质量就很放心,造就了前端框架三大台柱之一。
现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己总结出来的10个优秀的交互设计实例(APP, 网页),希望对你们有帮助。
现在很多优秀的网站、移动应用中都广泛的使用到交互设计。网络上也有很多相关的文章,例如什么是交互设计,交互设计的流程是怎样的?但是设计从来不是空谈,理论和实际的碰撞,才能激发出更多的灵感。以下是我自己总
微信小程序「我」的页面效果图与需求: 用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展
本文主要是记录自己在移动端开发中遇到的一些坑点或者总结(持续更新,有新的坑点会总结进来)
我前几篇文章中我介绍过一种手机移动端上下滑动的效果,那个效果是通过zepto来实现的,今天我来介绍一种基于swiper实现手机端上下滑动的效果。我先来贴出body内的代码
接下去应该是梳理一下 Android Tv 主界面实现原理及解析的一个系列博客了,大体上的安排是先介绍 Google 官方提供的 Leanback 库的使用,如何使用该库来实现简单的 Home 界面,然后再去分析 Leanback 主界面实现的相关源码,了解完 Google 是如何实现之后就可以扔掉 Leanback 自己来尝试实现,毕竟 Leanback 的可定制不高。
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验,通过简单的操作,自由的查看周围的物体。随着一些运营商推出大王卡等
之前给大家分享一份matlab绘图速查表《有了这张matlab绘图速查表,您还用担心matlab绘图吗?》,大家反响不错。今天再上干货猛料,给大家分享一个小编之前收藏的速查表汇总网站:cheat-sheets.org。该网站汇总300多种涵盖不同编程语言、脚本语言、系统软件等领域的速查表,内容非常全面。
记得去年做一个聊天项目需要实现类似QQ的下拉刷新并且有侧滑删除的功能,在网上找了很久都没有QQ的完美,多多少少存在各种的问题,最后把下拉刷新的功能去掉后,只保留了侧滑删除的功能才找到个完美的。回去后和一朋友讨论,朋友找了以后说了一句,这种功能没有8K以上的是写不出来的(⊙﹏⊙)b。现在看来当时真的太天真了。而如今自己也没有8K还是尝试去写写,顺便当练练手。
今天项目中需求是写出一个很简单的edittext输入框,但要求当输入字数过长时需要上下滑动以便查看所有文字,因为页面底部有一个”确定”的button,但刚开始输入框内的问题怎么都滑动不了,我一开始就想到了这是事件传递冲突问题,但试了很多种方法都不行,最后也是一个一个试才解决的,不多说,贴代码:
在MSE标准提出前,js无法处理buffer级别的视频资源,video标签本身的一些限制导致业务方很难对视频流进行过多干涉处理,今天我们主要来聊一下如果通过MSE,容器软编解码等技术来实现mp4文件“真正”意义上的预加载,预处理。
概述 本文讲述在mui框架下实现上下滑动控制显隐的效果。 效果 实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
你好,程序员。 多少个清晨,你让阳光肆无忌惮地穿透你精心搭配的格子衬衫;多少个白天,你在疯狂体会需求和 bug ;多少个午夜,你任凭无法止步的代码,收割着你的头发······ 在忙碌焦虑中自我否定变成了常态,时间久了,你也许对这样的生活也谈不上热爱或者讨厌了。 或许,你还记得曾经那个总在憧憬,要改变世界的自己吗? 作为一个程序员,你执着于技术,很少思考你们的世界。 一万个人眼里,程序员有一万种贡献。治愈残破代码,创造精彩世界。世界上每一个人美丽的梦都离不开程序员的点缀。 所以,有困难别再一个人纠结
如果要找算法岗,没有明确的算法方向和过硬的专长基本都没戏。我知道,这也是多数人遇到的难题。
领取专属 10元无门槛券
手把手带您无忧上云