我们已经用了两篇的篇幅介绍了微搭的布局组件，包括普通容器、文本、图片、轮播容器。 微搭中还有粗粒度的组件，今天介绍的数据容器就是粗粒度的组件。所谓粗粒度的组件，一般包括基础组件、样式还有默认的事件。...不同模板对应着不同的场景。比如一般首页如果我们放一些动态信息的就可以放简单列表，如果你的动态配了图片的可以选择图文列表。卡片列表一般用在电商类小程序用来展示最新的商品。...我们这里选择简单列表作为示例，选择了模板之后需要选择对应的数据源，组件会自动识别自动进行数据绑定 图片 如果自动识别的字段不是你需要的，可以选择文本组件，重新绑定需要的内容 图片 绑定的时候要从循环对象里选择需要的字段...图片 02 数据详情 数据详情对应着我们小程序里查看详情的功能，一般的场景是从列表页点击某条数据，跳转到详情页然后进行展示。...图片 图片 在详情页，我们将数据详情组件拖入到编辑区 图片 数据详情组件先需要选择需要的数据源 图片 数据详情需要根据页面传入的数据标识来过滤数据，我们会到我们的列表页面，选中我们的组件，给组件定义点击事件
三、知道“推荐”和学会“订阅” 1、在导航栏找到发现页，点击进入 2、推荐和订阅功能 推荐功能：AI个性化功能 1、推荐栏：是针对不同的行业领域内，选择出自己喜欢的领域，平台根据选择领域有针对性地给你推送精准信息...订阅功能：主题事件追踪 1、订阅栏：主要是针对一些较为关注的特定主题，订阅后可以持续性关注某个有热度的话题、以及事件的发展动态，方便素材搜集。 2、点击订阅即可看见历史的订阅主题。...四、找素材，找主题，你就搜索 导航栏的搜索按钮是为了方便快速找到相关的主题。 1、输入需要搜索的主题，然后回车。 2、根据主题点击卡片，可以选择查看或者订阅。 3、点击卡片查看后进入写作模式。...六、发散写作思维，扩展“写作角度” 在创作页面，如果我们输入一个主题，或者从某个热点素材进来，你就可以看见AI给推荐的“写作角度”。 点击“更多”，可以看见推荐列表，让你有更多的写作思路。...2、点击卡片可以进入文本编辑的状态，点击卡片右下角的“…”可以删除文件。 八、轻松“一键发文” 首先，当你一篇文章结束后，在右下角点击全网发文。 然后点击添加账号，如图。
在线演示 本文代码仓库 本文案例如图所示 image.png 原理 pc端的视差效果通常是 根据鼠标、键盘、滚动条的变化和操作 进行视觉上的差异化控制。...移动端可能还会有 重力陀螺仪 之类的交互，本文不讲移动端。 举些例子： 鼠标移到屏幕左上方：某元素就飞到屏幕右下方（跟鼠标反着来）。 页面往下滑动：背景图不动，文本元素等其他元素往上移动。...…… 我放几个例子让大家直观感受一下： 【点击跳转在线预览：⭐⭐鼠标移动的视差效果⭐⭐】 image.png 【点击跳转在线预览：使用GSAP的视差层效果特效（滚动鼠标滚轮）】 image.png 【点击跳转在线预览...：倾斜效果（鼠标移动）】 【点击跳转在线预览：创意广告视差效果（鼠标移动）】 实现 理解了实现的原理，那实现的关键就是 事件监听 addEventListener 了。...xValue = calcValue(x, pageX.offsetWidth) let yValue = calcValue(y, pageX.offsetHeight) // 设置卡片容器的旋转角度
点击埋点：统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。 曝光埋点：统计具体区域是否被用户浏览到，如活动的引流入口的显示、投放广告的显示等。...其中页面埋点和点击埋点是使用自动上报的方式实现，在 DOM 节点挂载特殊属性，通过埋点采集 JSSDK 监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。...上图是某电商首页底部的推荐区域，为了衡量用户对推荐结果的感兴趣程度，需要计算推荐区域的点击率（点击次数/曝光次数）。...所以我们需要制定一套逻辑来规定何时进行曝光埋点的数据上报。比如： 商品卡片必须完全的出现在浏览器可视化区域内。 商品必须在可视化区域内停留 5s 以上。...，防止重复曝光。
卡片摆放的顺序如下图所示，在遍历生成时会判断当前索引是否小等于卡片数量/2，是则将卡片生成在索引值*指定卡片间距的位置上，否则将其生成在(索引值-卡片数量)*指定卡片间距的位置上。...1.2f : 1f) * Vector3.one; 卡片尺寸大小 至此已经完成了卡片的生成，但是如何在点击上一个、下一个按钮时动态调整所有卡片的坐标、层级和大小才是关键。...*2以使其在0.5秒内的取值从0增加为1，并使用Mathf.Clamp01来钳制其取值范围不要超过1。...，如果是，使其立即变为最左侧的卡片，不表现动画过程，目的是为了防止如下图所示，卡片从最右侧移动到最左侧的穿帮现象： 穿帮现象 在生成卡片时，为卡片物体添加该脚本，并添加到列表中进行缓存，同时，定义一个用于存储各编号对应的层级和坐标的数据结构...在生成卡片时，记录了卡片当前的编号，以及各编号对应的层级和位置，在点击下一个、上一个按钮时，只需要根据卡片当前的编号+1或-1来获取目标层级和位置即可。
点击埋点：统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。 曝光埋点：统计具体区域是否被用户浏览到，如活动的引流入口的显示、投放广告的显示等。...其中页面埋点和点击埋点是使用自动上报的方式实现，在 DOM 节点挂载特殊属性，通过埋点采集 JSSDK 监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。...有效曝光 先举个例子： 上图是某电商首页底部的推荐区域，为了衡量用户对推荐结果的感兴趣程度，需要计算推荐区域的点击率（点击次数/曝光次数）。...所以我们需要制定一套逻辑来规定何时进行曝光埋点的数据上报。比如： 商品卡片必须完全的出现在浏览器可视化区域内。 商品必须在可视化区域内停留 5s 以上。...，防止重复曝光。
我们还需要添加一个点击效果。 每次元素被点击时都会触发 :active伪类，它引发一个 0.2秒的过渡： ? 翻转卡片 要在单击时翻转卡片，需要把一个 flip类添加到元素。...CSS 中的 flip类会把卡片旋转 180deg： ? 为了产生3D翻转效果，还需要将 perspective属性添加到 .memory-game。 这个属性用来设置对象与用户在 z轴上的距离。...如果匹配的话，则调用 disableCards()并分离两个卡上的事件侦听器，以防止再次翻转。...点击同一个卡片 仍然是玩家可以在同一张卡上点击两次的情况。 如果匹配条件判断为 true，从该卡上删除事件侦听器。 ?...为了防止这种情况，需要检查当前点击的卡片是否等于firstCard，如果是肯定的则返回。 ?
举例：玩游戏通过某个关卡时发送应用内消息促使他们完成重要的应用内操作 应用内消息可以自定义，使其显示为卡片、横幅、模态窗口或图片，并设置触发器，使其在合适时机出现 In-App Messaging 的集成...提供消息模板，您可以进行实验并根据自己的喜好进行自定义 卡片 包含两个操作按钮的结构化消息 为用户提供选择 Snip20230915_17.png 模态...宣传活动的名称：用于宣传活动报告，不会显示在消息中 宣传活动说明：用于宣传活动报告，不会显示在消息中 可以定义多维度多角度的受众群体 应用内消息还支持多语言 Snip20230915_24.png 时间安排...Snip20230915_25.png 定义事件范围，在开始时间和结束时间期间响应应用内消息 至少需要添加一个响应事件。...可以是默认事件或自定义事件，应用内消息会在指定的事件时触发 设置每台设备的推送频率限制 Snip20230915_27.png 转化事件 应用内消息将转化为事件进行统计 Snip20230915
如下图所示，距离用户的距离小于 d 的卡片，会被映射到 d-k ~ d 的区间内。 ? 图8 过近卡片位置映射 假设某商家距离用户的真实距离为 x，映射后的距离为 y，映射关系如下： ?...点击散开的交互方式 经过漫长的讨论，我们最终决定采取点击重叠区域后，卡片向四周分散的交互方式来解决重叠问题，效果如下： ? 图10 卡片散开的效果 下面围绕点击和投射两个部分，介绍该效果的实现原理。...点击 熟悉 Cocoa Touch 的朋友都了解，UIView 的层级结构是通过 hit-testing 来判断哪个视图响应事件的，在 ARKit 中也不例外。...后台聚类 对于排布比较密集的商家，卡片的重叠现象会很严重。点击散开的卡片数量太多对用户不是很友好。...摄像头轻微的角度变化，都会引起卡片之间出现部分重合。与有厚度的物体不同，卡片之间的深度关系变化很快，很容易出现多个卡片在屏幕同一个位置渲染的情况。所以经常会出现闪烁的现象： ?
可以把它理解为一个白板，上面贴满了各种卡片，每个卡片上都记录了一件事项，这些卡牌可以在这个白板上随意的移动和分组，同时它支持多人在这个看板上进行操作。它的设计理念是简单、快捷和自由。...团队协作：团队中最常用的就是版本迭代。 使用展示 ? 开始使用 创建看板 ? 创建列表 ? 添加卡片 点击刚创建列表上的添加卡片，输入内容即可创建完成。...自定义字段：可以自定义字段来满足自己的使用需求，比如：已完成，优先级等 卡片的操作 移动：可以直接拖动一张卡片从一个列表到另一个列表。点击卡片在卡片背面有移动选项，可以选择移动到哪个List中。...点击界面左上角的关注，可以关注这个看板，这个看板内的任何修改都会通知你。 也可以单独关注List，只有这个List内的修改才会通知。 更改背景，可以个性化的修改背景。...M：快速把别人添加到卡片上。 空格键：快速将自己添加到这张卡片上。 github：trello甚至可以和git上的push或者issue关联。 Trello API：觉得trello的功能不满足需求？
2.字段准确(准确性) 埋点的每个字段的值在上报的时候应该保证准确，这里的准确是字段和埋点列表中的枚举值应该一一对应，例如卡片的曝光 logtype 是 show，element_type 是 card...页面关闭之后绝对不能再打这个页面上的任何事件以及任何曝光。 前端的页面第一次进入容器的时候都由 sdk 的 hybird 容器打，后续相同容器内的页面跳转就由前端自己打。...（前端的打点都有web_url，非前端的都没有web_url） 播放器播放事件是播放器自己打的点，自动播放的时候会打一个点，点击之后会先打一个点击的点，再打一个播放的点。...（加备注，所有场景） 点击之后如果有跳转一定要打 openurl 事件，并且之后会打一个 pageshow 打点，只有多 tab 切换的时候可以不遵循这个规律。...定时器类打点生命周期需要做成只在当前页面内，切换页面或者 tab 要杀死相关打点线程。 4.是否重复上报，是否漏报 需要注意的主要是 pageshow 和交互事件是否有重复打点的情况。
用户右键点击指定合集卡片，弹出扩展操作选项，主要分为打开书库详情界面，编辑书库元数据，删除指定书库，在文件夹内按路径打开指定书库。...可以使用 HTML5 的标签或 Canvas 元素加载图片。 设置瀑布流事件：设置事件监听器，例如点击事件或滚动事件，以便用户可以与瀑布流交互，对瀑布流布局大小进行调整。...除此以外，对于影视资源而言最重要的就是如何在应用内进行信息和流媒体内容的展示和播放，普通形式的播放器无论从使用便利性角度还是趣味性角度而言都相对薄弱，所以在设计播放器形式过程中项目引入拟物设计的形式，拟物设计可以让用户更好地理解和使用网页...界面上方为随机推荐部分，会从数据库随机读取指定数目的电子书数据，以其封面生成走马灯，用户可以通过点击走马灯上的图片使用默认方式打开电子书文件。...图片详情界面 点击图片下方链接或者右键进入详情，即可进入图片详情界面，页面分为左右两个卡片界面，左半部分卡片主要进行图片内容的展示，点击缓存图片可以唤起预览窗口，在应用内预览图片情况，下方进行图片主色调分析
这次我们拿知乎的内容卡片来说吧，上图：可以看到，这里我们每个卡片，内容都稍微有些不一样。但毫无疑问，它们拥有相同的功能，可通过一个组件来控制内容的展示。...独立的组件组件的独立性，可以包括以下几个方面：维护自身的数据和状态、作用域维护自身的事件同样拿之前的内容卡片来看：这是个独立的卡片：它拥有自己的数据，包括标题、文字、图片、点赞数、评论数、日期等。...它拥有自身的状态，是否已点赞、是否已收藏、是否详细展示内容、是否展示评论等。它维护着自己的事件，包括点击分享、收藏、点赞、回复等等。...这个的话，更多时候我们是通过事件等方式来告诉外界一些事情。在这里举个例子，我们这里假设一个页面只允许一个卡片内容处于详细展开状态，故我们需要获取其展开的操作，方便控制。...在 Vue 里，如果父组件需要获取子组件的实例，也可以通过通过vm.$refs来获取。结束语这里主要从单个组件的角度来进行说明，搭配一点点的代码，防止文字太多难以理解。
（3）服务卡片：支持用户无需打开原子化服务便可获取服务内重要信息的展示和动态变化，如天气、关键事务备忘、热点新闻列表。...服务卡片 相信不少朋友第一次听到 “服务卡片” 这个词汇，都会在想：这不就是我手机屏幕上的 “小组件” 吗？哎！你还别说，它们之间还真有不同之处，但又有异曲同工之妙。 ...在鸿蒙的设计中，服务卡片的引入是与以往EMUI最大的不同，在屏幕上我们只需要找到图标下方有 “小横线” 的app，当然，这些也正是那些支持HarmonyOS的app。...在子菜单能力的加持下，像我们日常使用的某宝支付，打开地铁卡根本无需进入app，只要 “蹦” 出来一张小卡片方可实现功能。这是我们不得不惊叹：这是多么快捷、高效的交互体验啊！ ...HarmonyOS Developer中我们可以了解到这三者的分工： · 提供方模块 提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。
step1：在首页页面中添加一个四列布局，向四列布局中添加画布卡片，并对卡片的数据进行设置效果如图。...step2：在交互部分编辑条件，设置点击事件为跳转外部链接，打开方式为默认，并在外部链接中填写其对应的URL。...link字段；在跳转页面中景响应方式设置为打开URL,跳转地址设置为变量并选择link变量，打开方式设置为当前页签，完成跳转页面组件配置 step5：添加一个画布列表，在画布列表中选择画布轮播模式，在画布卡片中添加封面图...第一个操作变量节点使用了定义变量功能，从数据资产中获取了对应字段，将这个字段赋值给变量。第二个操作变量节点使用了修改变量功能，将外部变量的值修改为第一个节点定义的变量的值。...邀请海报按钮为列表菜单组件，在配置栏-交互中配置点击事件，配置逻辑控制，在逻辑控制中拖入组件动作节点，在组件动作中打开分享页面。
介绍桌面卡片是比较常见的功能，本案例详细列举了卡片开发的大部分功能，如使用postCardAction接口快速拉起卡片提供方应用的指定UIAbility，通过message事件刷新卡片内容等，为开发者提供了卡片功能的展示...效果图预览使用说明长按应用，添加卡片到桌面。卡片内可滑动选择案例，点击可进入案例详情。部分案例无详情页时，点击跳转到首页瀑布流。...实现思路新建卡片配置formconfig编写卡片UI代码触发刷新事件触发点击事件实现步骤本例涉及的关键特性和实现方案如下：新建卡片。...编写跳转事件：当应用未被拉起时，点击某个卡片时跳转到具体的案例页面。...：当应用在后台时，点击某个卡片时跳转到具体的案例页面。
从编程的角度看，面向人工智能的应用大约由三部分组成：领域知识、数学算法和计算方式。...DBP协议的主体——请求和响应 Model目录的request.java 和 response.java 实现了DBP协议中请求和响应的封装。 从面向对象的角度看Request的组成大体如下： ?...Skillinfo 用于在有屏终端和App 伴侣上的技能呈现，包括了图标Icon类和技能的名称。...ButtonClickedEvent和 RadioButtonClickedEvent了实现了Form.ButtonClicked和Form.RadioButtonClicked事件，当用户在有屏设备的表单上点击按钮...LinkClickedEvent类实现了Screen.LinkClicked事件，如果在卡片或者卡片列表配置了URL地址，当用户点击卡片或者卡片列表时，技能服务会收到此事件。
= $('#course-wrapper'), boundEvents = false; function bindEvents() { if (boundEvents) { //防止重复绑定事件...，可在其中执行跳转、上报等操作 } }; function bindEvents() { if (boundEvents) { //防止重复绑定事件 return...组件优化 step2 > 为了解决上一步的问题，这里尝试将组件模式从返回单例，改为能过构造函数来创建的模式。...* @param {Object} courseInfo - 被点击课程信息 * @description 点击某个课程卡片后的回调函数 */...* @param {Object} courseInfo - 被点击课程信息 * @description 点击某个课程卡片后的回调函数 */
组件的划分 目前来说，通常的组件划分可从两个角度来进行： 1. 视觉和交互上是一个完整的组件。 这里挑了个视频网站，如图： 通常我们第一眼看上去可区分出独立的视图和功能的，则可以列为这种组件的划分。...这种方式的组件划分，在理解上或许没有从业务上划分的直观，但从另一种角度看，哪种方式效率高一些也不一定呢。 Tips. 在一个团队内，最好是使用一种方式来进行划分。...组件的封装 个人认为，一个称职的组件，是以下形式的： 组件内维护自身的数据和状态 组件内维护自身的事件 通过初始化事件（event、绑定的 scope 事件，传入数据），来初始化组件状态，激活组件 对外提供配置项...组件内维护自身的数据和状态 这个比较好理解，以上面的小卡片为例子： 这个小卡片，它维护着自己的数据：封面图、描述、头像、作者。还有一个初始的状态，就是目前我们看到的样子。...组件内维护自身的事件 我们在把鼠标放在卡片上，随着鼠标的位置，顶部会有个小小的进度条，同时封面图会改变，如图： 每个小卡片都有自己 mousemove 事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
