首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

初步总结页面跳转动效

最近一直在做交互规范总结的工作,在不断梳理页面跳转逻辑的同时,发现页面的逻辑关系并不能和页面跳转的动效很好的结合上。虽然只是零点几秒的切换动效,却能在一定程度上影响用户对于页面逻辑的认知。...初次接触产品,恰当的动效使产品页面的逻辑关系与用户自身建立起来的认知模型相吻合,操作后的反馈符合用户的心理预期。...例子: 社交类APP如Twitter发表推文;工具类APP如Evernote中新建笔记;基本大部分苹果原生APP顶部的工具调出都采用这种方式 下面并不完全属于页面的切换,但是使用场景很相似且归到一类...(但Linkedin为了尽可能把feed流的空间扩大而将导航隐藏在侧滑出的边栏中用着很不方便,作为职场社交,所关注人发表的信息只是APP功能的一部分,发现人与工作也是相对重要的功能,所以页面需要频繁切换...侧滑 场景: 当页面见存在父集子集的时候,也是最常见到的一种转场动效。基本看到这样的动效,用户就会在头脑中形成树的模型——哪些内容在属性上相似,量级相同,以及不同层级的关系。

1.3K50

uniapp页面通信相关方法总结

利用url传参进行通讯 A页面向B页面传递参数 uni.navigateTo({ url: 'test/test?...我们假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。 监听事件 首先,在我的页面监听事件。...触发事件 进入登陆页面,触发事件 // 登陆页面 uni....而我们开发中会遇到很多页面通讯场景,如: vue 与 nvue,nvue 与 vue 的通讯 tabbar 页面之间的通讯 父页面与多级子页面的通讯 基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化...注意,这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。

3.9K20

【Flutter 专题】110 页面小跳转 (四)

和尚计划针对页面跳转的路由相关知识做一个汇总,发现有两类特殊方法暂未研究,今天特补充 Navigator 相关方法应用; canPop 和尚理解 Navigator 是对栈的操作...2. routes routes 为静态路由映射表,是 Map 类型,当使用类似于 pushNamed 静态路由方式进行页面跳转时,其对应路由首先需要在此绑定;一般默认 / 对应 root 页面,当然我们可以自定义为其他名称...插件,其方式基本类似; 注意: 一般采用 home 方式展示 Widget 时,路由表中不设置 / 对应 root 路由; 3. initialRoute initialRoute 用于设置初始启动页面...4. onGenerateRoute onGenerateRoute 为 RouteFactory 类型构造函数,当使用静态路由进行页面跳转时,进入未在 routes 中绑定的页面时,都会在 onGenerateRoute.... builder builder 属性常用作 MediaQuery 设备信息获取或用户信息偏好设置等;和尚之前有整理过关于 MediaQuery 的学习,再次不做赘述; ---- 对于页面的跳转还有很多需要学习和探索的地方

42531

小程序实践(七):页面传值

官方提供了5种页面的跳转方式,其中前四种跳转的时候带有url参数,用于指定跳转的页面地址,而其中前三种url中可以带有参数。    以此来实现页面跳转时候的参数传值。  ...1、页面传基本数据格式的方式     将参数添加到url部分     以  ?属性名=属性值 的形式添加 , 多个参数用&连接  示例:     跳转前页面代码: ?...跳转后页面代码: ?     控制台信息: ? 2、页面传对象的方式      测试将对象作为参数传递的话,接受页面时接收不到值的。      ...跳转后页面代码: ?   控制台信息: ?...二、全局APP对象传值 这个就很好理解了,就是有一个全局的对象,获得方式就是getApp    可以在任何页面使用,所以在要在传值也面前赋值,接受页面读取即可    赋值: ?

1.1K10

【Flutter 专题】10 页面小跳转 (二)

和尚前两天尝试了一下 Flutter 中的页面跳转,主要时通过 Navigator 相关的 push 和 pop 方法进行页面跳转和基本传参,很方便也很简洁;今天和尚补充一下 Flutter...测试过程中常用的另一种页面跳转方式。...补充一 和尚上一篇在测试页面跳转时,测试的页面都是在一个 main.dart 文件中;这样自然不合理,按照正常的业务逻辑会有很多分包,这样如何跳转到其他包下或其他文件下的 Page 页面呢...正常调用对应文件中 Page 页面跳转即可; ? Tips: 和尚建议不同文件中不要重名,如果本文件中有与其他包下文件中相同 Page 名称,会优先跳转到本文件中 Page 页。...补充二 fluro 和尚在学习中发现有的大神会用到 fluro,和尚也顺道学习一下,fluro 是 Flutter 关于页面跳转的三方库,它添加了灵活的 options 选项,如通配符、命名参数和清晰的跳转定义

72161

【Flutter 专题】09 页面小跳转 (一)

和尚最近在抽时间学习 Flutter,从零开始,一步一步走的都很艰难,前几天搭了一个基本的【登录】页面,现在学习下一步,页面之间的跳转;今天和尚整理一下 Flutter 测试过程中常用的页面跳转方式...Android 中的 Intent;和尚理解为就是一个栈,进进出出跟 Android 是很类似的,而 Flutter 也很直接,关键词就是 push 和 pop,和尚分别从这两个关键词来测试 Flutter 页面的跳转...1.2 pushNamedAndRemoveUntil 跳转页面并销毁当前页面 Navigator.pushNamedAndRemoveUntil 包含三个参数,第一个和尚理解为上下文环境,第二个参数为静态注册的对应的页面名称...2.1 push 方法单纯跳转页面 Navigator.push 向下个页面跳转时,可以传递参数,自己生成页面对象;如: onPressed: () { Navigator.push<Object...2.3 pushAndRemoveUntil 跳转页面并销毁当前页面 Navigator.pushAndRemoveUntil 向下个页面跳转时,多传一个参数即跳转后的操作;如: Navigator.pushAndRemoveUntil

1.1K31

起步 - vue-router路由与页面导航

vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。...改变浏览器地址不向服务器发送请求有两种方法, 一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的...localhost/rank 这就是history模式和hash模式的区别,除此之外还有一种abstract模式 Hash:使用URL hash值作为路由, History:依赖HTML5 History API和服务器配置...Abstract:支持所有JavaScript运行环境,如node服务器端。...,所有的页面都应该具有想用的底部导航条,按前面的路由结构是不可以导航到图书详情页的,如下: ?

85100

起步 - vue-router路由与页面导航

vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。...改变浏览器地址不向服务器发送请求有两种方法, 一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的...localhost/rank 这就是history模式和hash模式的区别,除此之外还有一种abstract模式 Hash:使用URL hash值作为路由, History:依赖HTML5 History API和服务器配置...Abstract:支持所有JavaScript运行环境,如node服务器端。...,所有的页面都应该具有想用的底部导航条,按前面的路由结构是不可以导航到图书详情页的,如下: ?

1.3K100

详解 | 小程序页面如何进行传递数据

工作中我们经常会遇到B页面需要A页面内的部分或全部数据;C页面内的一个函数执行完之后需要改变B页面内的显示样式;也或者是A和B两个页面用到了同样的网络数据,在其中一个页面做出修改后另一个页面也要随之改变以保证回传服务器时数据的准确性...1 页面URL传值 在小程序中当中,在父页面,通过url方式传递参数到子页面,是一种比较常见的做法 如下示例所示:应用场景 点击列表页面,进入详情页 动态改变详情页面的navBar中的title 比如...url的方式传递数据给子页面时,在子页面中的生命周期onLoad函数中的options中可以拿到 想要更改什么数据,直接重新setData就可以了的 注意 url的方式适合页面跳转携带参数,多个参数之间使用...这个方法getCurrentPage方法可以操作页面堆栈页面的数据和方法,可以做到对子(后一)页面对父(上一)页面的数据管理 提示 getCurrentPages()用于获取当前页面栈,数组中第一个元素为首页...-->目标页面是利用wx.navigateTo 中的 success 回调中使用 emit 触发,目标跳转页面用 on 监听实现将当前页面的数据传递给目标页面中,那当前页面又如何获取目标页面的数据呢。

11.4K31
领券