【Axure教程】移动端二级滑动选择器

今天教大家制作移动端二级滑动选择器的原型模板,该原型已全国一二级省市选择器为案例,因为该原型用中继器做的,所以制作完成之后使用也很方便,只需修改中继器表格里的内容即可

一、效果展示

1. 拖动选择

图片

2. 快捷选择

图片

【原型预览及下载地址】

https://axhub.im/ax9/e4f2832e83281a58/#g=1&p=二级城市综合案例

二、制作教程

1. 快捷选择中继器

图片

这个中继器非常简单

图片

每项加载时,设置中继器内文本框文字=item.column0,鼠标单击文本框时,设置位置文本框文字=column1+column2。

2. 全部地区选择中继器

图片

这里其实是两个中继器,先说左边的中继器。

图片

每项加载时,每项加载时,设置中继器内文本框文字=item.column0,如果xuanzhong=1,选中该行,默认第一行选中。然后将中继器转为动态面板(内面板),之后再转一次动态面板(外面板)。

外面板取消自动调整内容尺寸,自己调节大小;外面板拖动时,垂直拖动内面板;外面板拖动结束时,移动内面板到绝对位置=内面板的y值/中继器每行高度,然后用fixed函数取整数,再乘中继器每行高度。这样做的目的就可以保证拖动选择不会卡在两个选项中间。

拖动结束时,更新行,先把所有行的选中设为0,即未选中,然后通过计算移动了多少格,选中item.index==移动的格数:(内面板的y值-初始y值)/每行的高度,然后fixed四舍五入后用abs函数去绝对值,再+1。

这样左边中继器就完成了。

然后制作右边中继器,将左边中继器复制过去,插入多一列,把导入后:

图片

每项加载时,设置文本框文字=column1,其他不变。

然后左边中继器行被选中时,筛选右边中继器,条件为column0=column1,筛选完成后更新第一行的选中=1。

最后是确定和取消按钮的事件。

鼠标单击确定按钮时,设置城市文本=左边中继器选中的column0+右边中继器选中的column1,然后隐藏该弹窗,鼠标单击取消按钮时,隐藏该弹窗。

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

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

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

相关文章

Docker的安装和部署

目录 一、Docker的安装部署 (1)关闭防火墙 (2)关闭selinux (3)安装docker引擎 (4)启动docker (5)设置docker自启动 (6)测试doc…

自然语言处理学习笔记(二)————语料库与开源工具

目录 1.语料库 2.语料库建设 (1)规范制定 (2)人员培训 (3)人工标注 3.中文处理中的常见语料库 (1)中文分词语料库 (2)词性标注语料库 (3…

《皮囊》阅读笔记

《皮囊》阅读笔记 2023年8月2号在杭州小屋读完,该书共收录14篇散文,内容大致分为两部分:前半部分讲述作者的阿太(外婆的母亲)、母亲、父亲关于生活哲学、房子、疾病与信仰的故事,后半部分讲述生活在小镇的张…

QT充当客户端模拟浏览器等第三方客户端对https进行双向验证

在 ssl单向证书和双向证书校验测试及搭建流程 文章中,已经做了基于https的单向认证和双向认证,,, 在进行双向认证时,采用的是curl工具或浏览器充当客户端去验证。 此次采用QT提供的接口去开发客户端向服务器发送请求&a…

【雕爷学编程】 MicroPython动手做(35)——体验小游戏

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

6G内存运行Llama2-Chinese-7B-chat模型

6G内存运行Llama2-Chinese-7B-chat模型 Llama2-Chinese中文社区 第一步: 从huggingface下载 Llama2-Chinese-7b-Chat-GGML模型放到本地的某一目录。 第二步: 执行python程序 git clone https://github.com/Rayrtfr/llama2-webui.gitcd llama2-web…

嘉立创EDA画爱心

需要用:折线(L),两点圆弧,三点圆弧(A),园形(U)等功能 如下就是画出的图形 2D 3D 去除丝印pcb 2d 3d

【雕爷学编程】 MicroPython动手做(34)——通用传感器的综合运用2

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

数据库导出Excel格式的表结构

数据库导出Excel格式的表结构 你是否遇到到导出数据库里面的表结构,包含字段名称、类型、长度、小数、默认值、字段描述之类的需求;当我们去navcat里面找时发现没有,因为navcat没有提供这一功能,他只可以导出表结构的sql&#xff…

JDK8:Optional详解与源码分析,如何优雅的处理空指针

文章目录 一、Optional概述1、烦人的NullPointerException2、Optional简介 二、Optional使用1、创建Optional对象2、isPresent()与ifPresent()应用&源码解析3、get()应用&源码解析4、orElseThrow()应用&源码解析5、map()应用&源码解析6、flatMap()应用&源码…

利用ChatGPT制作行业应用:哪些行业最受益

引言 随着人工智能技术的快速发展,ChatGPT(Chat Generative Pre-trained Transformer)成为了一种引人注目的工具,它能够生成自然流畅的对话内容。这种技术不仅在娱乐领域有着广泛的应用,还可以在各个行业中发挥重要作…

数据可视化(5)热力图及箱型图

1.热力图 #基本热力图 #imshow(x) #x,数据 x[[1,2],[3,4],[5,6],[7,8],[9,10]] plt.imshow(x) plt.show() #使用热力图分析学生的成绩 dfpd.read_excel(学生成绩表.xlsx) #:表示行号 截取数学到英语的列数 xdf.loc[:,"数学":英语].…

《金融数据保护治理白皮书》发布(137页)

温馨提示:文末附完整PDF下载链接 导读 目前业界已出台数据保护方面的治理模型,但围绕金融数据保护治理的实践指导等尚不成熟,本课题围绕数据保护治理的金融实践、发展现状,探索和标准化相关能力要求,归纳总结相关建…

docker更换数据存储路径

1. 先停掉docker服务 sudo systemctl stop docker 可能会出现的问题: 这样会导致docker关闭失败,解决办法:systemctl stop docker.socket 确保docker关闭: 2.备份现在的 Docker 数据存储目录 /var/lib/docker(默认路径) mv /var/lib/docker /var/lib/…

Meta开源Llama 2免费大语言模型,媲美ChatGPT,可在线试玩

Llama 2是Llama 1模型的升级版本,引入了一系列预训练和微调 LLM,参数量范围从7B到70B (7B、13B、70B)。其预训练模型比 Llama 1模型有了显著改进,包括训练数据的总词元数增加了 40%、上下文长度更长 (4k 词元),以及利用了分组查询注意力机制来加速 70B模型的推理! 但最激动…

快速远程桌面控制公司电脑远程办公

文章目录 第一步第二步第三步 远程办公的概念很早就被提出来,但似乎并没有多少项目普及落实到实际应用层面,至少在前几年,远程办公距离我们仍然很遥远。但2019年末突如其来的疫情,着实打了大家一个措手不及。尽管国内最初的大面积…

【Leetcode】(自食用)找到消失的数字

step by step. 题目: 给你一个含 n 个整数的数组 nums ,其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字,并以数组的形式返回结果。 示例 1: 输入:nums [4,3,2,7,8,2,3,1] 输…

一套ai绘图软件教程帮你打开创作新篇章

在一个寂静的艺术工作室里,住着一个渴望成为画家的年轻人,名叫艾米。她梦想能够运用自己的创造力和手艺,创作出令人叹为观止的艺术作品。然而,面对空白的画布,她感到无从下手,不知道该从何处开始。每次她试…

Stable Diffusion 硬核生存指南:WebUI 中的 CodeFormer

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件,强壮的人脸图像面部画面修复模型 CodeFormer 相关的事情。 写在前面 在 Stable Diffusion WebUI 项目中,源码 modules 目录中,有一个有趣的目录叫做 CodeFormer,它就是本文的…

归并排序——“数据结构与算法”

各位CSDN的uu们好呀,今天,小雅兰的内容仍然是数据结构与算法专栏的排序呀,下面,让我们进入归并排序的世界吧!!! 归并排序 归并排序(MERGE-SORT)是建立在归并操作上的一种…