首页 >>  正文

如何匹配两列数据相同项

来源:baiyundou.net   日期:2024-09-20

社交APP中流行左滑右滑的效果来查看他人简短的页面资料,若二者感兴趣,会出现匹配。那么我们该如何通过Axure实现交友APP滑动匹配效果?本文对此进行了探讨分析,一起来看看吧。

前言

社交APP很多人都用过吧,目前流行一种让用户浏览图片和简短的个人资料,向左或向右滑动屏幕上的图片,表示他们是否对某个人感兴趣。如果两个人都对彼此感兴趣,就会出现“匹配”,他们可以开始聊天交流。今天带大家仿一个滑动匹配的原型。

一、演示

老规矩,先上演示:

二、说明

本教程只讲授此功能的核心交互,有以下几点:

  • 前中后三张图片的大小、位置、层级调整。
  • 滑动图片时应该怎样旋转。
  • 图片旋转角度解决满足条件时怎么处理。
  • 图片旋转角度不足怎么归位怎么回正。

其它的动态效果请自行增加。

三、准备工作

需要先准备以下元件:

一个用来右滑代表匹配成功时显示的矩形(起名:匹配),填充一个暗的背景色,透明度50%,文本就“匹配”吧,再用个醒目文本颜色,隐藏起来。

一个用来刷新的矩形(起名:刷新),同样隐藏。

一个中继器,数据有两列,一列叫 [[Item.image]]插入图片,一列叫[[Item.isShow]]代表是否显示,设置为分页显示,每页项数量为3。

  • 中继器第一层放一个大点的动态面板(起名:人物),取消“适应内容”,背景颜色直接透明
  • 动态面板里再放一个动态面板,位置最好居中一些(起名:滑动)。是我们主要交互的元件。
  • 这个“滑动”动态面板里面放一张图片。

元件结构是下图这样的,有朋友可能已经注意到了,中继器外面套了一个(组合),后面讲原因:

中继器的数据图片请自备,最好先按教程来,我的演示图片宽高为300px * 400px,[[Item.isShow]]列都写true。

四、教程

开始写交互了,先从“匹配”矩形开始,这个简单,“单击时”隐藏自身:

“刷新”矩形的交互是“单击时”刷新页面,这里是因为我在做第一版时发现了一个中继器筛选会导致拖放交互失效的BUG,已提交给Axure官方确认了,所在刷新页面是目前兼容性最好的方法。

中继器的交互有点多,但是也不难理解,主要是设置图片大小、位置、层级。我已经都标清楚了,请看下图:

这里有三点需要注意:

  1. 设置图片尺寸时,锚点要选“顶部”这样后面的移动可以无需计算。
  2. 移动“人物”动态面板是为了把所有的图片都放在一起。
  3. 把“人物”置底是为了按中继器的顺序排好层次。

关键的“滑动”动态面板的交互来啦!

依次详细解释一下:

拖动时:

  • 让图片跟随鼠标移动
  • 向右移TotalDragX为正时要逆时针转,向左移TotalDragX为负时要顺时针转,所以用了 [[-TotalDragX]],顺时针转负的角度就是逆时间嘛。除以5是鼠标每移5个像素,让图片才旋转1度。

旋转时:

如果右滑逆时针超过7度(顺时针低于-7度):

  • 显示“匹配”矩形,前面已经设置过“点击时”隐藏了。
  • 图片向右下方移动100像素,并逐渐隐藏。
  • 更新当前行 [[Item.isShow]]为False,不再显示。

如果左滑顺时针超过7度:

  • 图片向左下方移动100像素,并逐渐隐藏。
  • 更新当前行 [[Item.isShow]]为False,不再显示。

拖放结束时(没有触发“旋转时”说明拖动幅度不够大,需要归位,角度回正)

如果当前顺时针转了:

如果当前逆时针转了:

告诉大家一个小技巧:

中继器如果筛选到一个都不显示了,那么中继器的“每项加载时”就根本不会触发。那怎样知道中继器已经筛选空了呢?这时外面那个(组合)就起作用了,也要添加交互的:

这时把“刷新”矩形显示出来就好了呀。

这样一个交友APP滑动匹配效果就制作完成了,可自行在放大图片、成功匹配等环节加入更多绚丽的动效。

本文由 @Jorkin 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

","gnid":"9caa0b181dd5283b0","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01c184f963b00177c3.jpg","width":"900"},{"desc":"","height":"812","s_url":"https://p0.ssl.img.360kuai.com/t01ed68e3aafe18446a_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01ed68e3aafe18446a.gif","width":"404"},{"desc":"","height":"739","title":"","url":"https://p0.ssl.img.360kuai.com/t0169c278496c486e88.jpg","width":"739"},{"desc":"","height":"306","title":"","url":"https://p0.ssl.img.360kuai.com/t012559eada4bc83f68.jpg","width":"485"},{"desc":"","height":"238","title":"","url":"https://p0.ssl.img.360kuai.com/t015b0496d48444122a.jpg","width":"485"},{"desc":"","height":"237","title":"","url":"https://p0.ssl.img.360kuai.com/t01a0a37964ad8d9587.jpg","width":"485"},{"desc":"","height":"825","title":"","url":"https://p0.ssl.img.360kuai.com/t01d0f06ca9aee3376f.jpg","width":"485"},{"desc":"","height":"1176","title":"","url":"https://p0.ssl.img.360kuai.com/t01408a3f31a2dcb007.jpg","width":"485"},{"desc":"","height":"243","title":"","url":"https://p0.ssl.img.360kuai.com/t017c64ea63fecf0cee.jpg","width":"485"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1682565720000,"pure":"","rawurl":"http://zm.news.so.com/54c413eb7f1629ceae6a5aabba16b902","redirect":0,"rptid":"228e013176f64299","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[{"clk":"ktechnology_1:app","k":"app","u":""}],"title":"Axure实现交友APP滑动匹配效果

单欣岩4649如何在excel中两列找出相同数据 -
贡科叶15538206874 ______ 见截图 C1输入=IF(COUNTIF(A:A,B1),"相同","") 公式下拉

单欣岩4649如何比对excel表格两列数据中的相同部分或重复部分 -
贡科叶15538206874 ______ 1.首先,在C1输入公式=MATCH(A1,B:B,) 回车后下拉公式,如果返回的是数字,比如说C1的3,就说明A1单元格的内容再B列里第3行存在,也就是B3="A".如果A列的内容再B列里没有就返回错误值#N/A.2.如果嫌错误值难看,可以将公...

单欣岩4649excel中怎么对比两列数据查找重复项 -
贡科叶15538206874 ______ 1、首先打开需要处理的excel表格数据,对比两列的重复数据,如图所示为例. 2、D2公式为:=IF(C2=B2,"相同","不同"),这样就可以实现excel两列对比,判断C2和B2是否相同,如果相同就返回值“相同”,反之则显示不同. 3、最后,全部数据以同样的方式进行对比,就会全部得出结果.

单欣岩4649如何在excel中筛选出两列中相同的数据并配对排序. -
贡科叶15538206874 ______ 右键点b列,插入空列.这样原来的b列数据到了c列.b1=if(countif(c:c,a1),a1,""),双击b1填充柄;选a、b两列,按b列升序,不扩展选区,排序.d1=if(countif(a:a,c1),c1,""),双击d1填充柄;选c、d两列,不扩展选区,按d列排序.删掉b列和d列.

单欣岩4649excel怎么找出两列都相同的项 -
贡科叶15538206874 ______ 在C1输入:=if(sumproduct((A$1:A$100=A1)*(B$1:B$100=B1))>1,"重复","") 向下填充. (数据区域根据实际修改) 如果第二次以上出现才算重复的,公式改为:=if(sumproduct((A$1:A1=A1)*(B$1:B1=B1))>1,"重复","") 向下填充.

单欣岩4649excel中怎样比较两列内容是否相同
贡科叶15538206874 ______ 我们以下表的数据为例,具体的介绍一下操作方法. 2 方法一: Excel分别对AB列两列数据对比,比如A2=B2,就返回相同,否则返回不相同. 3 D2公式为:=IF(C2=B2,"相同","不同"),这样就可以实现excel两列对比,判断C2和B2是...

单欣岩4649怎么匹配两个excel表格中的数据是否一致 -
贡科叶15538206874 ______ 1、首先,我们打开一个含有两个表格的excel文档; 2、然后我们选中上方的表格,之后我们右击选择复制; 3、之后我们选中下方单元格的区域,然后右击,弹出的界面,我们点击选择性粘贴; 4、然后我们点击选中减,之后我们点击确定; 5、之后我们看到下方的单元格中都是0,说明两个表格中的数据是一致的,如果不一致的话,下方的表格中就会出现差值.

单欣岩4649怎么样比较两列中数据的相同跟不同 -
贡科叶15538206874 ______ 方法一:如果数据不重复的话,可以加一列,使用countif()来看另一列中是否有相同的数据.方法二:排序后把两列数据放在一起,目测即可.

单欣岩4649如何将EXCEL中两个表按相同数据进行匹配? -
贡科叶15538206874 ______ 具体操作方法如下: 所需材料:Excel 2007演示. 一、如下图,该工作簿中第一张表为一个成绩单. 二、第二张表中要比对人名后填入正确的分数.这时点击B2单元格,点击“FX”. 三、找到“VLOOKUP”函数,点击“确定”. 四、第一个参数设置“A2”,第二个参数选中表1中姓名和分数两列,第三个参数“2”(返还第二个比对参数的第二列),最后一个参数输入“FALSE”,点击“确定”. 五、这时即可比对并填入正常的分数,最后下拉填充. 六、下拉填充后即可比对两个表中数据并填入正确分数值.

单欣岩4649Excel 怎样筛选两列数据中的相同部分 -
贡科叶15538206874 ______ 比如对比的数据在A、B列,你可以在C列输入这样的公式:=IF(A1=B1,"OK","")公式向下复制,这样,再通过自动筛选,找C列的OK即可.

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024