首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Axure最快实现移动左右滑手势滑动效果

昨天项目需要做一个手机版的活动页面的原型,其中需要一个商品展示模块,移动版需要左右滑手势的效果,结果想了小半天才想到怎么非常快速的实现这个小功能。接下来说说我的方法,我觉得应该是最快速的办法了。...建立元件如上图:放一个手机模型,中间看好哪里需要做左右手势效果。在这个模块位置,建立三个小模块,这三个小模块就是需要滑动的部分。2. 转换为动态面板这里是一个小重点,大家注意了。...二、第二步弄好元件以后,要开始加事件了,我们先想想最后需要什么效果:三个小模块可以左右滑动,滑动过程内容要跟着一起动;左右滑需要边界,最左侧不能模块最左侧的位置,最右侧也不能低于模块最右侧的位置。...好了,预览看效果吧。是不是很简单呢?

14020
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo

    移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思 在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植...也就是说,要求就是,大手机上,看着每个元素,包括文字都要大一些.而在小手机上,看着要小一些.全部都整体缩放呢?...放弃了媒体查询.我将目光转向了JS,虽然我一直不喜欢在这种展现去使用JS,因为我不希望因为JS进行DOM操作大幅的降低网页的性能.但是,我用JS来设置一些html的font-size好像不会损失太多的性能...决定用JS来实现.就需要来考量一下....当然,比率是一个问题.如,我们以10为比率,并且以720的设计稿宽度来计算,我们会得到如下 320/720*10 = 4.44444 这样的数值.在移动端这没有什么问题,但我们在PC端进行调试的时候就有问题了

    1.1K10

    大屏时代的生态变迁,看平板手机的拇指热键与界面布局

    在小屏手机上,用户可以相对轻松地点击顶部Action Bar中的Tab;而在平板手机上,直接在内容区域左右滑动实现切换显然是最为便捷的。...以横滑展开菜单为例,在平板手机上,不要放大横滑所需的距离,别让用户必须在整个屏幕范围内使用手势才能达到触发效果。...人们使用屏幕巨大的手机,不代表他们有着巨人般的,手势应该围绕手指进行设计,而不是围绕屏幕。 整体移动。界面中的多数元素是静态的,需要我们自己伸手触及。...TIME在其移动版页面侧边放置了一个“抽屉把手”,点击之后会展开一个完整的近期新闻面板。 在屏幕左右边缘放置的交互元素很可能处于平板手机的拇指热区之外,但无论怎样也比放置在顶部更加容易操作。...你也可以为这种模式添加横滑展开的手势,只要不与界面整体的横滑回退效果产生冲突即可。总体上讲,功能控件位于屏幕左右边缘的模式更适用于双手拇指同时操作的情况,因此在平板电脑的界面中更为常见。

    2.3K10

    js - 移动端的超出滚动功能,附带滚动条,可解决弹中滚动穿透问题。

    背景: 弹里边有可滚动区域时,在移动端的坑我就不多说了。 找了很多解决滚动穿透的方案,最终都不能完美解决。 一气之下自己js撸了一个。 效果图: ?...原理: 1、解决滚动穿透:通过给弹绑定touchmove和mousewheel事件,取消默认行为实现。...2、取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果。...37 transY += moveY; 38 if (moveY > 0 && transY > 0) { 39 /* 鼠标向下移动...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github: 移动端超出滚动效果

    7.2K10

    024设备盘点之“世界料箱立体库大会”

    多层穿梭车立体库 miniload立体库的出入库的效率的瓶颈实在miniload堆垛机上,货架上的所有的料箱都是有一台堆垛机完成的。...如果穿梭车能自己移动到隔壁的巷道里,那多排货架可以用少量的穿梭车就能完成所有料箱的进出库作业。也就是穿梭车除了能前后移动,也能左右移动,即四向多层穿梭车。...如果穿梭车能自己爬货架,自己完成不同货架之间的切换,那系统将更加灵活和柔性。...,并且存储的容量不大的话,可以考虑用如下的自动化系统,想必很多人在网上看到过它的身影,在菜鸟无人仓里,由机械配合环形货架组合而成的小型立体库。...无货架式垂直立体库 以上介绍的各种料箱立体库形式都是将料箱存放到货架里,如果不用货架,料箱直接垂直的一个个互相堆叠摞在地上,然后由一个天车式的机构进行存储也可以完成同样的自动存储的效果

    44820

    腾讯游性能优化之路

    2017 Qcon“移动专项最佳实践”专题讲师 何纯 ?...这样的大背景下,腾讯游也进入了精品3.0的精细化运营阶段,意味着对产品的玩法和质量要求会更高。 在PC时代、机箱的可随意扩展性使得PC上的性能有很多富余,但在手机上,性能却是显得格外捉肘见襟。...就拿正在席卷一切的王者荣耀为例,在公测前进行过的性能优化点有上千个,优化前后的效果也是非常明显的,无论是内存、CPU、网络流量,还是drawcall和FPS,都是同类产品中的佼佼者。 ?...透过表象看本质,我们在性能优化的方法上基本分成四大类:游戏资源优化、渲染优化、代码优化、策略优化。...除了游性能优化的工具和方法之外,更多移动产品相关的全链路周期质量工具,也已陆续接入了腾讯官方推出的一站式游戏/应用测试平台wetest.qq.com,并且开放给广大游戏和移动应用开发者,助力提高用户的研发效率和产品品质

    1.6K30

    滚动穿透的6种解决方案【已自测】

    关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹的超出滚动效果 ? 局限问题: 弹中内容滚动到顶部或底部后,还会连带页面body一起滚动。也就是还会发生穿透效果。...五、body滚动 + 弹内部滚动[js-代码模拟上下滑动手势效果] 我想,既然我们监控弹、监控touchY那么辛苦了已经,还差再辛苦一点,自己写一个模拟手势滚动效果嘛!...这次依旧从弹上入手,不让弹用css自动的超出滚动,而是超出隐藏,然后简单粗暴地利用JS的touchstart、touchmove、touchend等事件,手动写一个自定义滚动效果。...4、进而根据不同的手势方向给弹可滚动内容的transform添加位移translate效果(或者基础用position: absolute,再根据手势移动的距离,动态设置top的值。代码不止一种)。...问题局限: 不好的点就是没有原生滚动条那种效果,一点也不灵动,只能鼠标移动多少、可滚动区域挪动多少。

    13.6K31

    用手机就能实时给图像直线描边,速度不亚于目标检测,在线Demo可玩

    萧箫 发自 凹非寺 量子位 报道 | 公众号 QbitAI 没想到,现在手机上就能做实时线段检测了。 速度丝毫不比目标检测慢,而且检测效果还非常不错: ?...随着机器人用途的多样化,现在就连移动设备(如手机)和嵌入式设备(机器人)也希望能搭载线段检测模型,为机器人视觉研究做准备。 为了满足这些需求,一个名为M-LSD的移动设备实时线段检测模型出现了。 ?...事实上,这个模型也确实非常小:1~11基于MobileNet改编,12~16则是一个自顶向下结构。 没错,一共也才16结构,只相当于大型线段检测模型体积的2.5%。 ?...由于是在网页上运行的,而且生成模型用的是M-LSD,因此检测速度无法达到手机上的实时检测效果(手机版M-LSD检测速度在12.7~26FPS左右)。...不过,网页版M-LSD生成一张线段检测图片,也只需要2.5秒左右。 ? 我们先上传一张室内设计的图片试试。 ? 效果确实不错,直线结构的部分都被勾勒了出来。

    62620

    2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。...webkit-input-placeholder{color:green;} 6.不想让按钮 touch时有蓝色的边框或半透明灰色遮罩(根据系统而定) -webkit-tap-highlight-color:rgba(0,0,0,0); 7.在移动端做动画效果的话...用 css3的 blur效果的话,是整元素全部模糊,而透过模糊看其他的元素不模糊 23.如果需要展示小于 12px的文字,用 transform:scale(%);它将元素缩小,但本身应该占的空间并不会变小...,所以比如要元素居左对齐的话,还需设置 translateX 24.在移动端对 input框使用 disabled属性,会导致元素里面 value值在页面上被隐藏看不见,可以对元素使用 css3效果 pointer-event...(这个没用过)  ③ 有的时候比如弹出一个 iphone上滑动出来的,点击黑色半透明区域弹出消失,这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时,想禁止屏幕的滑动

    3.7K40

    腾讯技术分享:Android版手机QQ的缓存监控与优化实践

    通过监控和清理相互配合,我们最终实现了优化Q整体内存,降低OOM率的效果。以下是详细方案。...统计显示:Bitmap引用内存占Q总内存40%左右: ? 减少图片占用内存,需要规范图片缓存的使用。...5.2纵向对比 我们从7.3.0版本接入内存优化,从版本迭代来看,优化效果显著:OOM率由0.09%左右降低至0.047%左右,降幅47%: ?...Q版本间平均内存增幅明显放缓,版本增幅由5.8M左右降至1.14M左右: ?...微信内部正在使用的网络封装库,即将开源》  《如约而至:微信自用的移动端IM网络跨平台组件库Mars已正式开源》  《开源libco库:单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]

    1.6K20

    教你在五分钟构建一个App页面

    我们知道,网页响应式开发常用的框架是Bootstrap,但对应移动App的开发我们就没有必要使用Bootstrap了,因为它好多样式也是争对网页,用他来开发移动app显得有点重了。...开发移动app的框架有很多,既然他敢这么说肯定有一定的实力 这里我总结了三个使用mui的理由 简,快,易。...简 mui文件大小只有108kb mui 提供20多个控件 和50多个js api 及100多个样式 快 js加载快一般17ms左右 体量小页面绘出快,预加载,专场快 易 使用HbuilderX编辑器...首先将手机与电脑usb连接,可借助第三方软件连接手机如,360机助手 在连接手机之前需要打开手机的开发者模式,并在打开usb调试 对于不同的手机开发者模式打开不同,大家自行百度 连接成功图示 完成上述步骤后...,我们在编辑器菜单栏选择“运行” 点击运行到设置 底部控制台打印信息如下 第一次会在你的手机上面安装Hbuilder,然后手动或自动启动Bulilder即可在手机上运行 如下: 到此完成

    1.4K20
    领券