【Axure教程】移动端多选图片上传

在移动端应用中,提供多选图片上传功能对于用户体验和功能性具有重要意义,尤其是在像微信、微博等社交媒体平台上。

例如用户可以快速上传多张图片进行分享,发布相册或创建图文并茂的动态;卖家可以一次性上传多个产品图片,提高商品展示效果;房主或中介可以上传多张房屋照片,提供更全面的房产展示;用户可以上传多张活动照片,参与比赛或活动分享。

所以今天作者就教大家怎么在Axure用中继器制作多选上传图片的原型模板,具体效果如下所示:

一、效果展示

  1. 点击+号按钮进入相册页

  2. 在相册页里可以选择多个图片,案例中限制数为9,达到限制数继续选择会弹窗提示

  3. 点击选择按钮后,将图片设置会添加主页面

  4. 在主页面点击图片可以显示大图,点击删除按钮可以删除选中

  5. 如果选择图片小于就,可以再次点击+号继续添加

【原型预览含下载地址(下载链接在第一页处)】

https://axhub.im/ax9/bace41c00c111653/#g=1&p=上传图片(多图)

二、制作教程

制作这个主要分为三个部分,包括主页面、相册页面(选择图片)、大图页面

1、主页面

主页面如下图所示,我们用中继器来制作,在中继器里面添加图片元件,选择网格分布,每行3个,多页显示,一页最多显示9个

中继器表格里我们需要两3列内容,no列用于对图片的排序,picture列用于存放图片,name列用于记录图片名。第一行no列默认为0,导入+号的图片。

中继器载入时,我们用排序的交互,对no列进行排序,按降序排列,这样我们后续选中图片,设置no值比0大,这样添加按钮就可以永远在最后一张图,如果上传了9张,因为每页显示9,所以添加按钮就到达第二页,就默认看不到了。

然后我们要让中继器picture列的图片值设置到图片元件里,如果是axure10的话,点击链接,选择图片元件即可,如果是axure8、9就要在中继器每项加载时,用设置图片的交互,将picture列的值设置到对应的图片元件里。

2、相册页面

相册页面主要有中继器,按钮,矩形组成,如下图所示摆放

中继器里面包括图片元件和多选按钮,案例中多选按钮由形状制作而成,可以简单理解为一个选中的样式(√),一个没选中的样式(圆圈)

中继器表格里主要有以下几列,picture列:用于存放图片;name列:记录图片名;xuanzhong列:控制是否选中

在中继器每项加载时,我们要让中继器picture列的图片值设置到图片元件里,如果是axure10的话,点击链接,选择图片元件即可,如果是axure8、9就要在中继器每项加载时,用设置图片的交互,将picture列的值设置到对应的图片元件里。

我们用xuanzhong列的值控制多选按钮是否选中,如果值等于1,就是选择,否则就未选中。我们按照这个逻辑设置多选按钮,用显示和隐藏的交互,如果xuanzhong列的值等于1,就显示选中、影藏未选中,否则就显示未选中,隐藏选中

点击选中按钮时,我们要根据选中列的值来控制,是选中状态还是未选中状态,如果是选中状态,点击就是要变成未选中的状态,那么我们就用更新行的交互,更新当前行的值为0

如果选中列的值不为1,就是要从未选中变成选中,原则上我们也是用更新行的交互,将当前行更新为1即可。不过这里有个逻辑要处理,因为我们最多上传9张,像微信朋友圈微博很多移动端都是这个逻辑,所以我们还需要判断选中了几张

这里我们需要在中继器每项加载时用一个文本来记录,在第一行加载的时候,设置文本值为0,如果选中列的值为1就用设置文本的交互,将他设置为原来的值+1,这样就可以记录到有选中了几个,再用设置文本的交互,将已选数量设置到选择按钮上。

那回到前面的交互,如果点击选中列的值不为1,就是要从未选中变成选中,我们就要判断选中了几个,如果小于9,就用更新行的交互,更新当前行的值为1,这样就可以选中了,如果选中的数量为9,就是已经选满了,不能再选了,我们就用显示的交互,显示提示弹窗

然后我们就要把选中的图片信息添加到主页的中继器里,这里我们用添加行的交互即可,在选中的条件下,即xuanzhong列的值等于1,我们用添加行的交互,将当前中继器表格里的值设置添加到主页的中继器即可,添加行的时候no列的值填写1,比0大就可以了。

这里需要注意的是,因为每次更新中继器都会重新读取,为了避免重复添加,我们用在中继器开始加载时,要先做删除行的操作,删除的条件就是除了no列=0的其他列删除

我们把中继器右键转为动态面板,如果图片太多,超过一个页面的高度,我们还可以再次转为动态面板,然后用拖动外面板移动内面板的交互,让他可以上下拖动选择更多。

然后我们把这个页面所有内容右键转为动态面板,右键固定在左上角,鼠标单击关闭按钮或者选择按钮时,用隐藏的交互,将该面板隐藏即可。

主页如果点击中继器里的+号图片,就是no值为0的图片元件,我们用显示的交互,显示这个动态面板就可以了,因为这个面板后面还有第二个状态(大图页),所以,我们用设置面板状态,设置他到相册页这个状态,设置的时候可以勾选隐藏时显示,就不用多写一个显示的交互了。

3、大图页面

大图页面包含图片元件,删除和返回按钮,文本标签,矩形等,如下图所示摆放,放在上面相册页面的第二个状态页里

回到上面说的,主页页如果点击中继器里不是+号图片,就是想查看大图,所以,我们用设置面板状态,设置他到大图页这个状态,设置的时候可以勾选隐藏时显示,就不用多写一个显示的交互了。

然后用设置图片的交互,将中继器里当前行的图片值设置到大图元件里,然后用设置文本交互,将name列的值设置到标题元件里。这里还需要一个默认隐藏用于记录名称的元件,把名字设置进去,这样后续离开中继器后才知道要更新那条数据。

鼠标点击删除按钮时,就是要从主页删除这张照片,那主要图片的显示与否,是通过相册页中继器是否选中来控制的,所以我们用更新行的交互,条件是相册中继器里name列的值等于记录名称的值,我们把它选中列的值更新为0,就是从选中变成未选中,这样在主页就不会出现这张图片了,在相册页页不会选中,最后我们用隐藏的交互,隐藏动态面板即可

如果点击返回按钮,我们就不用删除,直接用隐藏的交互隐藏动态面板即可。

这样我们就完成了移动端多选图片上传的原型模板了,后续使用也很方便,只需要在中继器表格里导入图片填写对应的信息,预览后即可自动生成对应的效果。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文内容由微信公众号:Axure高保真原型 原创发布,未经许可,禁止转载和商用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

劲爆!Kimi月之暗面可以接入微信,智能升级, 打造个性多Agent(二)

前言 在当今这个快速发展的AI时代,抖音推出了一个名为“扣子Coze”的工具,帮助用户快速、低门槛地搭建属于自己的AI机器人。本文将详细介绍如何使用扣子Coze配置自己的AI Agent,并展示其在多个平台上的应用。 如何使用多个Agent 搭建更加智…

chatgpt: linux 下用纯c 编写一按钮,当按钮按下在一新窗口显示hello world

用这个程序模板,就可以告别只能在黑框框的终端中编程了。 在 Linux 环境下使用纯 C 语言编写一个按钮,当按钮按下时,在一个新窗口显示 "Hello World"。我们可以使用 GTK 库来实现这个功能。GTK 是一个用于创建图形用户界面的跨平台…

大模型日报|4 篇必读的大模型论文

大家好,今日必读的大模型论文来啦! 1.ChatGLM 技术报告:从 GLM-130B 到 GLM-4 AII Tools GLM 技术团队介绍了 ChatGLM,这是一个不断发展的大语言模型系列。本报告主要关注 GLM-4 语言系列,包括 GLM-4、GLM-4-Air 和 …

r2frida:基于Frida的远程进程安全检测和通信工具

关于r2frida r2frida是一款能够将Radare2和Frida的功能合二为一的强大工具,该工具本质上是一个Radare2的自包含插件,可以帮助广大研究人员利用Frida的功能实现对目标进程的远程安全检测和通信管理。 Radare2项目提供了针对逆向工程分析的完整工具链&…

好用的抖音短视频矩阵系统推荐:筷子剪辑,超级编导。抖去推

目前短视频矩阵行业如火如荼,为大家推荐几款比较好用的短视频矩阵系统。 第一款叫做筷子剪辑,由筷子科技开发,网页版应用工具,无需下载安装 主打视频剪辑,支持一键成片,视频发布等,&#xff0…

RS-232协议详解:深入理解与实际应用

RS-232协议详解 RS-232协议,也称为推荐标准232,是一种用于串行通信的标准协议。它在计算机和外围设备之间的通信中广泛应用。本文将详细介绍RS-232协议的各个方面,包括其历史、工作原理、信号类型、连接方式、应用场景等。希望通过这篇文章&a…

靠这套车载测试面试题系列成功哪些20k!

HFP测试内容与测试方法 2.3 接听来电:测试手机来电时,能否从车载蓝牙设备和手机侧正常接听】拒接、通话是否正常。 1、预置条件:待测手机与车载车载设备处于连接状态 2、测试步骤: 1)用辅助测试机拨打待测手机&…

24年计算机等级考试22个常见问题解答❗

24年9月计算机等级考试即将开始,整理了报名中容易遇到的22个问题,大家对照入座,避免遇到了不知道怎么办? 1、报名条件 2、报名入口 3、考生报名之后后悔了,不想考了,能否退费? 4、最多能够报多少…

计网课设-发送TCP数据包

一、效果展示 二、代码实现 import nmap import socket import tkinter as tk from tkinter import messagebox,Listbox from threading import Thread#获取自身IP,从而确定当前局域网范围 def get_ip_address():#创建了一个socket对象,socket.AF_INET表…

国际版多商户商城小程序源码(Android+IOS+H5)

一站式全球购物新体验 功能介绍 精准分类、我的团队、开通会员我的返利、我的订单、快速购买 邀请返利、购物车、我的提现 一、引言:为何选择国际版多商户商城小程序? 随着全球化的步伐不断加快,越来越多的人开始追求国际化的购物体验。国…

FreeBSD在zfs挂接第二块ssd 硬盘

为FreeBSD机器新增加了一块ssd硬盘:骑尘 256G 先格式化分区硬盘 进入bsdconfig 选Disk Management 选择ada1 ,也就是新增加的硬盘 选择auto 然后选择Entire Disk 提示信息 The existing partition scheme on this disk (MBR) │ …

代码随想录训练营Day 64|卡码网98. 所有可达路径(深搜)

1.所有可达路径 98. 所有可达路径 | 代码随想录 代码&#xff1a; &#xff08;深搜&#xff09;邻接矩阵表示 #include <iostream> #include <vector> using namespace std; vector<int> path; vector<vector<int>> result; void dfs(const ve…

小摩法兴纷纷转多,看涨港股的时机来了吗?

恒生指数今日高开一度上涨89点报18520点&#xff0c;创近两周高。之后持续震荡下行&#xff1b;恒指临近中 午跌幅扩大&#xff0c;恒生科技指数一度跌近1.5%。截止收盘&#xff0c;恒生指数跌0.52%&#xff0c;盘面上&#xff0c;石油、煤炭、环保、建筑节能等板块涨幅居前&a…

新手下白对Latex下手啦!

第一次使用latex&#xff0c;浅浅地记录一下子吧。 首先我们一般会下载一个latex模板&#xff0c;如果想知道咋下载&#xff0c;评论去告诉俺哟&#xff01; 新手小白首先要看懂结构&#xff0c;不然完全下不了手&#xff0c;本文就以IEEE的模板&#xff0c;从头往下讲咯~ 第…

OpenAI 推出“模型规范”:塑造责任制的人工智能的框架

为了提升人工智能开发的责任性和透明度&#xff0c;OpenAI 最近发布了一份名为“模型规范”的初步草案。这份文件首次明确了其 API 和 ChatGPT 模型行为的指导原则&#xff0c;并通过博客形式对外公布。 OpenAI 在博客中解释说&#xff1a;“我们之所以发布此文档&#xff0c;…

云渲染全攻略:平台精挑细选与技巧指南

在数字化浪潮中&#xff0c;创意产业的每一步进步都得益于技术革新。云渲染技术以其卓越的效率和灵活性&#xff0c;已成为推动影视、建筑、游戏等创意行业快速发展的关键力量。本文将为您提供一份详尽的云渲染指导手册&#xff0c;涵盖平台挑选策略和操作技巧&#xff0c;助您…

Centos7.9安装kerberos

文章目录 一、背景二、Kerberos安装部署2.1kerberos服务端必要软件安装2.2配置krb5.conf2.3配置kdc.conf2.4配置kadm5.acl2.5创建Kerberos数据库2.6启动Kerberos服务2.7创建Kerberos管理员principal2.8客户端安装kerberos2.9Kerberos功能验证 本人其他相关文章链接 一、背景 亲…

科普文章:怎么远程监控电脑屏幕?三种监控电脑屏幕的方法

远程监控公司电脑屏幕是一项重要的管理手段&#xff0c;它不仅有助于提升工作效率&#xff0c;还能确保公司信息安全和合规性。随着远程办公的普及&#xff0c;这一需求变得日益重要。下面我将详细介绍几种实现远程监控公司电脑屏幕的方法&#xff0c;以及实施过程中需要注意的…

线程池的简介

定义 线程池就是使用多线程的方式&#xff0c;将任务添加到队列中任务都是runnable或者callable的实现类 优点 线程和任务分离&#xff0c;任务可以复用线程池统一管理线程&#xff0c;线程可以复用避免因为开启和销毁线程造成的资源浪费 官方线程池的参数分析 深度理解 线程池…

JVM 相关知识整理

文章目录 前言JVM 相关知识整理1. 新生代和老年代2. 对象的分配过程3. Full GC /Major GC 触发条件4. 逃逸分析4.1.示例4.2. 使用逃逸分析&#xff0c;编译器可以对代码做如下优化 5. 对象的内存分配6. Minor GC 与 Major GC/Full GC的比较:7. 什么对象进入老年代7.1. 大对象直…