荣盛科技网站建设,网站开发写好了怎么发布,网站使用条款模板,装修平台网站今天教大家制作移动端二级滑动选择器的原型模板#xff0c;该原型已全国一二级省市选择器为案例#xff0c;因为该原型用中继器做的#xff0c;所以制作完成之后使用也很方便#xff0c;只需修改中继器表格里的内容即可
一、效果展示
1. 拖动选择 2. 快捷选择 【原型预览…今天教大家制作移动端二级滑动选择器的原型模板该原型已全国一二级省市选择器为案例因为该原型用中继器做的所以制作完成之后使用也很方便只需修改中继器表格里的内容即可
一、效果展示
1. 拖动选择 2. 快捷选择 【原型预览及下载地址】
https://axhub.im/ax9/e4f2832e83281a58/#g1p二级城市综合案例 二、制作教程
1. 快捷选择中继器 这个中继器非常简单 每项加载时设置中继器内文本框文字item.column0鼠标单击文本框时设置位置文本框文字column1column2。
2. 全部地区选择中继器 这里其实是两个中继器先说左边的中继器。 每项加载时每项加载时设置中继器内文本框文字item.column0如果xuanzhong1选中该行默认第一行选中。然后将中继器转为动态面板内面板之后再转一次动态面板外面板。
外面板取消自动调整内容尺寸自己调节大小外面板拖动时垂直拖动内面板外面板拖动结束时移动内面板到绝对位置内面板的y值/中继器每行高度然后用fixed函数取整数再乘中继器每行高度。这样做的目的就可以保证拖动选择不会卡在两个选项中间。
拖动结束时更新行先把所有行的选中设为0即未选中然后通过计算移动了多少格选中item.index移动的格数(内面板的y值-初始y值)/每行的高度然后fixed四舍五入后用abs函数去绝对值再1。
这样左边中继器就完成了。
然后制作右边中继器将左边中继器复制过去,插入多一列把导入后 每项加载时设置文本框文字column1其他不变。
然后左边中继器行被选中时筛选右边中继器条件为column0column1筛选完成后更新第一行的选中1。
最后是确定和取消按钮的事件。
鼠标单击确定按钮时设置城市文本左边中继器选中的column0右边中继器选中的column1然后隐藏该弹窗鼠标单击取消按钮时隐藏该弹窗。
那以上就是本期教程的全部内容感兴趣的同学们可以动手试试哦感谢您的阅读我们下期见。
