.

7.点击文本/图片复制淘口令功能

小常发表于:2017年10月16日 14:32:54更新于:2019年04月24日 18:44:15

一、案例效果

淘口令每日穿搭.jpg

复制好淘口令,手机打开淘宝APP,就会弹出淘口令指定的商品链接,浏览即可。


二、应用场景

大家期盼已久的文本复制功能来了,主要通过设置点击时的触发器:对相关文字进行复制。

特别是双十一又双叒要来了,像复制淘口令的功能,电商相关的H5就十分需要了。


三、功能设置

1.添加相关商品图片

编辑版式文档_-_后台管理系统.jpg

2.同时为了方便提示用户,点击某个商品时,再添加一些提示文字及提示框等;在这添加了以下的元素:灰色半透明弹窗、关闭提示和热区,并将这些元素初始隐藏。

以第一个条纹T商品为例,将它的淘口令在淘宝App获取,添加段落组件,将淘口令复制到文本组件中,并放置在灰色块的图层顺序上方,跟提示元素一起隐藏。

image.png


3.给条纹T上的热区设置点击时的触发器;触发显示元素:灰色半透明弹窗、关闭提示X号、X号上的热区、淘口令文本组件。

image.png


4.为了方便用户确定已经将文本复制,需要一个简单提示,添加一个提示框图片:复制成功,同样设置初始隐藏。

image.png


5.重点来了:给淘口令的文本组件添加触发器:触发复制文本的触发行为。如图:

完成1、2、3步后,将要复制的淘口令粘贴到空白处。可以选择是否成功后提示,点击确认。

并同时设置触发器隐藏文本组件,显示复制成功的提示元素

image.png


6.给X号上的热区添加触发器,点击时隐藏所有的提示元素

image.png


7.设置完成,其他商品的淘口令相关设置依照该方式。


8.点击复制文本的触发行为不只适用于文本组件,同样也可以给图片直接设置——点击时触发复制文本,只要在触发行为的空白处,填写好要复制的文字即可。如图:

image.png



回复(4)