【7.0.5.0】如何设计移动端跳转页面的可搜索选择器？

登录

需求：在设计移动端表单填报的时候，我希望设计成类似下图的这种点击字段跳转到新的页面，选择后返回的效果：

如图，选择页面也支持搜索。请问这种功能用活字格如何实现呢？

Timothy.Xu · Timothy.Xu

您好，这个功能看起来在移动端还是蛮主流的，感觉微信之类的应用都在使用呢

这个功能看起来还是比较简单的，通过图文列表在字典表中选择就可以了。但是实际做起来，有一些比较重要的细节要注意到哈~以下是步骤：

1、首先是准备好数据表，这里我们以楼主给出的填报的场景为例，我们要准备的是处理业务的【订单表】以及作为字典的【产品名称表】和【计量单位表】：

2、因为是移动端，我们选择使用图文列表来呈现订单列表，然后把详情页也画好，这里不是重点，详细的做法就略过了：

这里两个小细节：(1)移动端设计触摸交互的时候是一片区域，所以我们采用给背景图片添加命令的方式来交互，不懂的同学看这里；(2)因为字体颜色和普通水印不同，字段绑定处使用公式实现了类似的效果；

3、选择页的设置，因为产品名称和计量单位都是类似的选择方式，所以对于通用的部分，比如搜索框和返回按钮，我们可以放在母版页：

然后用图文列表绑定两个字典表，分别设计两个字段的选择页：

这里需要将图文列表的模板设置为超链接，点击时就跳转到订单详情页，并把当前行的值回传。

4、重点来了，这种设计思路表单填报其实有两个场景，一个场景是在选择后直接写回数据库，比如微信的个人资料页，在我们修改头像之后，可能并不想修改所在地，所以每个修改都是独立的，在修改后会即使更新到数据库里；而另一种场景就是现在的场景，我们需要点击一个完成按钮，就类似于PC页面的修改/删除按钮，来更新页面上所有的数据，此时我们可以认为页面是松绑定的。那么在页面跳转的过程中，之前填写在前端页面上的数据就会丢失。

为了规避这个问题，我们需要把填报在前端页面的内容，在页面跳转时带着一起走。具体做法：

订单详情页->选择页：在页面跳转时，把每一个字段的值都带到选择页去。需要注意的是，因为页面上有可能有一些额外的参数，比如说用来决定页面是新增/修改的参数，也需要一并传递：

选择页->订单详情页：因为移动端的页面切换基本都是使用页面跳转，而不是弹出页面，所以值回传的逻辑就不适用了，我们需要在点击数据内容跳转时把这些数据继续传递，同样不要忘记所有的参数：

这样，就可以实现楼主需要的效果了~

附上demo：

zyk.Zhou · zyk.Zhou

本帖最后由 zyk.Zhou 于 2021-10-15 10:31 编辑

页面跳转+搜索页面就好了啊参考内置demo中的移动端搜索页面

		自动登录	找回密码
密码			立即注册

[已处理] 【7.0.5.0】如何设计移动端跳转页面的可搜索选择器？

最佳答案

2 个回复

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

微信认证勋章

元老葡萄

活字格认证

活字格高级认证