【知识点37】移动选择器效应
01预期效果实现手机移动终端项目的选择效果。(1)拖动列表选择列项；(2)在列表的顶部和底部设置约束条件；(3)拖动结束时，将列表移动到最近的列项。
02具体操作步骤(1)在原型文件的画布中，拖动矩形元素(名称分别为：背景、头部、底部)。其中背景矩形为背景(大小300200)，头部和底部矩形填充线性渐变设置(大小30080)。拖到中继器(名称：列表；尺寸300680)，并输入北京辖区名称。为了实现拖动效果，将repeater转换为动态面板(名称：DistrictList)。与repeater动态面板DistrictList大小相同，拖动到动态面板(名称：DistrictPanel)中，拖动时移动DistrictList动态面板。(因为渐变矩形的蒙版，需要再次放入动态面板。(2)点击DistrictPanel的动态面板，在交互功能面板中，打开交互编辑器。添加“移动时”事件。点击“移动”选择地区列表的动态面板，并将“跟随当前组件”设置为“移动”。添加“拖动时”事件。单击“移动”选择当前组件，设置“移动时跟随垂直拖动”，然后单击“确定”完成。
(3)选择所有组件，右键单击“转换为动态面板”，将动态面板的最终尺寸调整为300200。一样的效果。(4)拖动列表面板时的位置约束。如果DistrictPanel动态面板的上边界超过头部矩形元素的下边界，则将DistrictPanel动态面板移动到头部矩形元素的下边界；如果DistrictPanel动态面板的下边界超过底部矩形元素的上边界，则将DistrictPanel动态面板移动到底部矩形元素的上边界，并减去DistrictPanel动态面板的高度。添加“拖动时”事件场景。” value-[-[[DP . top]]>]& gt；值-[[head.bottom]]”，将当前组件移动到“0，[[head.bottom]]”。添加“拖动时”事件场景。” value-[[DP . bottom]]& lt；value-[[bottom.top]]”，将当前组件移动到“0，[[bottom.top-DP.height]]”。添加事件情境，切换到if。
(5)拖动结束后，移动到最近的列项，点击DistrictPanel的动态面板，在交互功能面板中，打开交互编辑器。添加“拖动结束时”事件。点击“移动”选择当前组件，在“移动”处选择“到达”设置“[math.min (dp.top/40)”。Y轴坐标的Tofixed (0) * 40]]”。
这样手机就可以拖动列表选择列表项，拖动结束移动到最近的列表项，约束列表的上下部分。
未完待续~
