请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

红烧兔头
金牌服务用户   /  发表于:2021-10-15 10:17  /   查看:1674  /  回复:2
10金币
需求:在设计移动端表单填报的时候,我希望设计成类似下图的这种点击字段跳转到新的页面,选择后返回的效果:


如图,选择页面也支持搜索。请问这种功能用活字格如何实现呢?
附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

您好,这个功能看起来在移动端还是蛮主流的,感觉微信之类的应用都在使用呢 这个功能看起来还是比较简单的,通过图文列表在字典表中选择就可以了。但是实际做起来,有一些比较重要的细节要注意到哈~以下是步骤: 1、首先是准备好数据表,这里我们以楼主给出的填报的场景为例,我们要准备的是处理业务的【订单表】以及作为字典的【产品名称表】和【计量单位表】: 2、因为是移动端,我们选择使用图文列表来呈现 ...

2 个回复

倒序浏览
最佳答案
最佳答案
Timothy.Xu讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-10-15 10:17:41
来自 3#
您好,这个功能看起来在移动端还是蛮主流的,感觉微信之类的应用都在使用呢



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

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



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



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

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



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



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

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


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


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



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




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



附上demo:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
zyk.Zhou活字格认证
论坛元老   /  发表于:2021-10-15 10:27:20
2#
本帖最后由 zyk.Zhou 于 2021-10-15 10:31 编辑

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


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部