【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,然后隐藏该弹窗,鼠标单击取消按钮时,隐藏该弹窗。
那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。
相关文章:

【Axure教程】移动端二级滑动选择器
今天教大家制作移动端二级滑动选择器的原型模板,该原型已全国一二级省市选择器为案例,因为该原型用中继器做的,所以制作完成之后使用也很方便,只需修改中继器表格里的内容即可 一、效果展示 1. 拖动选择 2. 快捷选择 【原型预览…...
PHP操作solr
1,php下载solr(索尔)扩展,phpinfo需要支持solr扩展. 2,安装 Solr。Solr 要求您的系统上有 Java。java –version,Java 的版本大于 1.6 3,下载solr,并安装 D:\solr。 开启solr命令:solr start 关闭solr命令:…...

leetcode 46. Permutations(排列)
返回数组nums中数字的所有可能的排列组合。 思路: 排列组合这种一般会想到DFS。 这个排列中每个数字只能用一次, 可用如下DFS流程 stack.push(num); dfs(nums, num); stack.pop();退出条件: 当stack的size和nums数组一样时,说…...

5、二叉树
二叉树遍历 递归序 public static void f(Node head) {if (head == null) {return;}f(head.left);f(head.right); }前中后遍历_递归 public static void preOrderRecur(Node head) {if (head == null) {return;}System.out.print(head.value + " ");preOrderRecur…...
Doris比MySQL快的原因
简介 在数据存储和数据分析领域,MySQL和Doris是比较流行的数据库管理系统的代表。 在如今的大数据时代,数据量和数据分析的速度是很重要的。 在数据分析和数据处理中,Doris比MySQL快,这个问题一直是许多人关心的问题。 Doris的数…...

Prometheus + Grafana安装
Prometheus是一款基于时序数据库的开源监控告警系统,非常适合Kubernetes集群的监控。Prometheus的基本原理是通过HTTP协议周期性抓取被监控组件的状态,任意组件只要提供对应的HTTP接口就可以接入监控。不需要任何SDK或者其他的集成过程。这样做非常适合做…...

二十三种设计模式第二十一篇--解释器模式
解释器模式(Interpreter Pattern)是一种行为设计模式,它用于定义一种语言的语法结构和解释器,使得可以解释并执行特定的语法规则。该模式可以将复杂的语言表达式分解为更小的语法单元,并定义其解释过程。 解释器模式的…...

PHP8的数据类型转换-PHP8知识详解
什么是数据类型转换? 答:数据从一个类型转换成另外一个类型,就是数据类型转换。 在PHP8中,变量的类型就是由赋值决定的,也就是说,如果 string 赋值给 $var,然后 $var 的类型就是 string。之后…...
2023 电赛 E 题 K210 方案
第一章:K210 介绍 K210芯片是一款基于RISC-V架构的嵌入式人工智能芯片,具备低功耗、高性能的特点。它拥有强大的图像处理和机器学习能力,适用于边缘计算设备和物联网应用。为了方便开发者,K210芯片提供了丰富的外设接口ÿ…...
Python的正则表达式re模块的compile()方法有什么作用?
re模块是Python标准库中的正则表达式模块,它提供了对正则表达式的支持。re.compile()是re模块的一个方法,用于将正则表达式编译成可复用的正则对象。 正则表达式是用来匹配和处理文本模式的强大工具。当你需要在字符串中查找、替换或者提取符合特定模式…...

SQL 语句中 left join 后用 on 还是 where,区别大了!
目录 情况 小结 举例 情况 前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条,奈何发现还是有两条。 后来发现 join on and 不会过滤结果记录条数,只会根据and后的条件是否显示 B表的记录,A表的记录一定会显…...

uni-app 微信小程序自定义导航栏
一、效果图 二、导航栏的组成 上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px 三、开发步骤 1、设置navigationStyle:custom {"path": "pages/v…...

电缆故障检测仪技术参数
一、电缆故障测试仪的技术参数 1.采样方法:低压脉冲法、冲击闪络法、速度测量法 2.电缆长度:50m、300m、1km、2km、5km、10km、30km、60km 3.波速设置:交联乙烯、聚氯乙烯、油浸纸、不滴油和未知类型自设定 4.冲击高压:35kV及以下…...

固定资产管理软件
固定资产全生命周期管理软件采用先进的RFID技术,从采购、入库、借用、总结、清理到损坏等方面准确统计资产,突破过去手工统计的复杂性,节省资产资源,减少调查时间,确保资产管理工作的准确性和快速性。 固定资产管理软…...

云安全攻防(四)之 云原生技术
云原生技术 容器技术 容器与虚拟化 虚拟化(Virtualization)和容器(Container)都是系统虚拟化的实现技术,可实现系统资源的”一虚多“共享。容器技术可以理解成一种”轻量的虚拟化“方式,此处的”轻量“主…...

线上通过Nginx部署前端工程,并且配置SSL
介绍、为了更好的帮助大家学习,减少歧义,IP地址我就不隐藏了,公司也是我自己的公司。你们就别来攻击了。 下面给出步骤: 一、前期准备工作 通过在目标服务器上安装宝塔面板、安装redis、mysql、nginx、jdk环境等 1、 2、前端工程通过npm run build 打…...

直播预告 | 开源运维工具使用现状以及可持续产品的思考
运维平台自上世纪90年代开始进入中国市场,曾形成以传统四大外企:IBM、BMC、CA、HP为代表的头部厂商,还有一众从网管起家的国内厂商。2010年前后,出现了以Zabbix、Nagios、Cacti为代表的开源工具,后来又陆续出现了Prome…...
GPT带我学-设计模式-工厂模式
1 你好,请问你知道设计模式的工厂模式吗 当然知道,工厂模式是一种创建型设计模式,它提供了一种创建对象的方式,而不需要暴露对象创建的逻辑细节。工厂模式通过使用工厂类来创建对象,从而将对象的实例化逻辑与客户端代…...

Docker 安装 Tomcat
目录 一、查看 tomcat 版本 二、拉取 Tomcat Docker 镜像 三、创建 Tomcat 容器 四、访问 Tomcat 五、停止和启动容器 一、查看 tomcat 版本 访问 tomcat 镜像库地址:https://hub.docker.com/_/tomcat,可以通过 Tags 查看其他版本的 tomcat; 二、拉…...
seata注册到nacos(docker)
1、安装:docker run --name seata-server2 -p 8091:8091 -p 7091:7091 seataio/seata-server:1.5.1 复制seata-server2到服务器,然后过河拆桥 2、创建挂载目录 mkdir -p /ssy/seata_docker 3、将容器 resources文件挂载到宿主机 docker cp seata-server2…...

wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...

地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...