首页 > 其他分享 >页面交互逻辑比较

页面交互逻辑比较

时间:2024-01-17 16:44:07浏览次数:28  
标签:逻辑 菜单 项目 Piping 动态 打开 交互 页面

写这篇是为了记录下:能达到相同效果的两种不同的页面交互逻辑。

场景

侧边栏菜单分为两部分,一部分是固定,一部分是动态。如下图所示:

image

不同的项目,动态菜单的数量和内容不一样。处于项目 A 时,若处于动态菜单页面(比如 Piping),点击顶部下拉框切换到项目 B),那么:

  1. 之前打开的项目 A 的 Piping 页签是否需要自动关闭?
  2. 项目 B 的动态菜单中若有 Piping,则可以打开项目 B 的 Piping 页签;若没有,则打开什么页签呢?

方案一

  1. 之前打开的项目 A 的 Piping 页签没有自动关闭,再次点击时,内部自动显示为项目 B 的 Piping 页签数据;
  2. 项目 B 的动态菜单中若有 Piping,则保留之前打开的项目 A 的 Piping 页签,只是内部自动显示为项目 B 的 Piping 页签数据;若没有,则默认打开第项目 B 的第一个动态菜单页签。

方案二

  1. 之前打开的项目 A 的 Piping 页签必须自动关闭;
  2. 不论项目 B 的动态菜单中是否有 Piping,自动打开固定菜单页签(比如“通用数据”)。

比较

比较这两种不同的页面交互逻辑方案:方案二优于方案一。

  1. 切换到项目 B 后,方案一会出现之前未关闭的项目 A 的页签Pid,但实际上,用户并未点击项目 B 的页签Pid,造成不必要的页面空间浪费;
  2. 方案一需要判断项目 B 是否有之前打开过的 Piping菜单,增加逻辑复杂度。(有时会出现内部数据不改变的情况)。

以上两种不同交互逻辑,从简洁性来说,方案二更合适。

标签:逻辑,菜单,项目,Piping,动态,打开,交互,页面
From: https://www.cnblogs.com/shayloyuki/p/17970194

相关文章

  • harmonyos 02 app创建,页面跳转
        HDF             添加button导入 router  返回按钮   指定返回的页面      ......
  • 电子签章Java后端与前端交互签名位置计算
    电子签章过程中存在着在网页上对签署文件进行预览、指定签署位置、文件签署等操作,由于图片在浏览器上的兼容性和友好性优于PDF文件,所以一般在网页上进行电子签章时,会先将PDF文件转换成图片,展示给用户。用户在页面上确定好签署位置,并进行签署时,后端服务会通过对电子印章/手写签名位......
  • 陈文自媒体:影视解说起号逻辑!
    1、还是要定位,赛道定位,内容定位,人群属性定位2、建议细分领域定位,短视频哪个赛道都是火海,所以得要细分,比如历史领域,古代历史、现代历史,人文历史,地理历史,以此类推自己在细分,选择一个自己喜欢的即可。3、在短视频世界,细分赛道依然能养活你全家了,不用担心吃不饱。4、还是要想办法先涨粉......
  • mysql8.0逻辑架构
    1、逻辑架构剖析1.1、服务器处理客户端请求首先MySQL是典型的C/S架构,即Client/Server架构‘,服务器端程序使用的mysqld。不论客户端进程和服务器进程是采用哪种方式进行通信,最后实现的效果都是:客户端进程向服务器进程发送一段文本(SQL语句),服务器进程处理后再向客户端进程发......
  • VUE框架实现符合Vue3语法格式的页面与各个配置项解析------VUE框架
    <template><HelloWorld></HelloWorld><h1>{{name}}</h1><h1>{{age}}</h1><h1>{{a}}</h1><h1>{{b}}</h1><button@click="sayHello">按一下</butto......
  • HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码
    HarmonyOS4.0应用开发安装编辑器这里安装windows版本为例安装依赖打开DevEcoStudio这八项全部打钩即可开始编写代码,如果存在x,需要安装正确的库即可开发点击CreateProject选择默认模板——nextModel部分分为Stage和FA两个应用模型,FA是支持7版本以内的模型支持JS和TS,而Stage支持最......
  • asp.net 页面的事件执行顺序(全)
    原文链接:https://www.cnblogs.com/ishibin/archive/2012/08/14/2638054.html默认的aspx页面都是继承自System.Web.UI.Page,Page基类定义了很多需要预执行的事件,这些事件虽没有在aspx页面中显示的定义或提及,但它们仍然会以一定的顺序去执行,这些事件的执行顺序是:1.OnPreInit 2.......
  • js自动缩放页面自适应屏幕分辨率
    1.简单版:s=window.screen.width/1920;document.body.style.zoom=s;2. 当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3属性transform可以自适应屏幕分辨率大小vars;functionresize(){s=window.screen.width......
  • 手势交互!人人都会用的交互方式应该如何设计?
    一、什么是手势交互手势交互是指通过手部动作来进行人机交互的一种方式。随着移动设备和触摸屏技术的普及,手势交互成为了一种重要的交互方式。它可以使用户更加直观地操作设备,提升用户体验,同时也可以拓展设备的交互维度,使得用户可以通过更加丰富的手势来完成各种操作。手势交互的优......
  • vue入门页面,搭建localhost官方默认页面
    按照提示操作可以做出下图效果:idea中的vue目录层级为:1.下载node.js(nodes.js是前端的运行环境,类似于后端中的jdk,没有node.js后续操作无法进行,具体流程百度)2.新建文件夹(这个文件夹就是你之后vue的目录)点进去新建的文件夹3.输入cmd回车4.输入命令:npmconfigsetreistryht......