【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.hqwc.cn/news/59426.html

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

相关文章

微信小程序 map地图(轨迹)

allMarkers效果图 废话少说直接上马(最后是我遇到的问题) cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角…

【Winform学习笔记(六)】warning MSB3274:引用dll版本冲突

warning MSB3274:引用dll版本冲突 前言正文1、解决方法 前言 在本文中主要介绍 解决 类库编译 Warning MSB3274 的方法; 在项目中引用了自定义控件库,界面设计时可以正常放置删除控件,但启动时会报异常; 编译提示&…

《Zookeeper》从零开始学Zookeeper源码(二)之数据序列化与通信协议

目录 序列化与反序列化通信协议请求头的数据结构响应头的数据结构 序列化与反序列化 zookeeper的客户端与服务端、服务端与服务端之间会进行一系列的网络通信,在进行数据的传输过程中就涉及到序列化与反序列化,zookeeper使用Jute作为它的序列化组件&…

Python-OpenCV中的图像处理-图像轮廓

Python-OpenCV中的图像处理-图像轮廓 轮廓什么是轮廓查找轮廓绘制轮廓 轮廓特征图像的矩轮廓面积轮廓周长(弧长)轮廓近似凸包轮廓边界矩形 轮廓 什么是轮廓 轮廓可以简单认为成将连续的点(连着边界)连在一起的曲线,具…

Flutter系列文章-实战项目

在本篇文章中,我们将通过一个实际的 Flutter 应用来综合运用最近学到的知识,包括保存到数据库、进行 HTTP 请求等。我们将开发一个简单的天气应用,可以根据用户输入的城市名获取该城市的天气信息,并将用户查询的城市列表保存到本地…

redis的缓存更新策略

目录 三种缓存更新策略 业务场景: 主动更新的三种实现 操作缓存和数据库时有三个问题 1.删除缓存还是更新缓存? 2.如何保证缓存与数据库的操作的同时成功或失败? 3.先操作缓存还是先操作数据库? 缓存更新策略的最佳实践方案&am…

【效率提升—Python脚本】根据Verilog文件自动生成tb文件

文章目录 Verilog端口文件(仅做示范用)对应的tb文件相应代码 在数字IC设计过程中,根据顶层生成testbench时存在很多重复性工作,因此为了提高工作效率,特地开发此脚本。 Verilog端口文件(仅做示范用&#xf…

JVM深入 —— JVM的体系架构

前言 能否真正理解JVM的底层实现原理是进阶Java技术的必由之路,Java通过JVM虚拟机的设计使得Java的延拓性更好,平台无关性是其同时兼顾移动端和服务器端开发的重要特性。在本篇文章中,荔枝将会仔细梳理JVM的体系架构和理论知识,希…

C语言第十课----------------扫雷----------数组的经典练手题

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 🎂 作者介绍: 🎂🎂 🎂…

软件验收测试包括几种类型?验收测试报告有什么好处?

在软件开发中,验收测试是软件项目在开发完成后进行的最后一项测试工作。它是确认软件是否满足预期要求,并准备将软件交付用户的核心环节,它可以确保软件的质量和功能符合用户的需求和期望。 一、软件验收测试的类型 软件验收测试可以分为多…

鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统em

​ Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下: 首页 工作台:待办工作、消息通知、预警信息,点击可进入相应的列表 项目进度图表:选择(总体或单个)项目…

Sencha Ext.NET Crack 快速应用程序的正确工具集

Sencha Ext.NET Crack 快速应用程序的正确工具集 Sencha Ext.NET是一个高级的ASP.NET核心组件框架,它包含了强大的跨浏览器Sencha Ext JS库。通过140多个预构建和专业测试的UI组件实现企业级性能和生产效率。Sencha Ext.NET使用尖端的Web技术创建功能强大的Web应用程…