掌握这个技术, 轮播图和文本还能更优雅

简介: 掌握这个技术, 轮播图和文本还能更优雅

今年第一篇文章, 不会写的太干, 主要以开拓思维为主. 大致如下:

  • 分享一下组件间通信技术如何赋能轮播图和文本, 让产品和设计师实现需求自理

当然, 读完如果大家没有一些收获, 本人负全责.(>*<)

技术预备:

组件间通信技术如何赋能轮播图和文本

image.png

上图画布中有两个组件: 轮播图文本组件. 我们可以在图中看到当轮播图组件内容切换时, 文本组件内容也会对应的切换. 熟悉前端开发的小伙伴也许会觉得这样的功能很好实现, 我们可以用诸如 react, vue 这样的框架来轻松实现数据状态的共享, 但是通过传统的组件开发方式来实现这样的功能, 存在太多的局限性, 比如:

1. 轮播图组件的图片和文本的位置相对比较固定, 不够灵活

我们一般的轮播图组件长这样:

image.png

一般轮播图文案会放在图片中间或者底部, 如果产品经理或者设计师小朋友想调整文本的位置, 比如以下几种:

左图右文(或右图左文)排版:

image.png

轮播文本出现在左上方:

image.png

上图下文的轮播图排版:

image.png

面对这些花里胡哨的排版设计, 传统做法只能通过程序员不断修改或者扩展代码,才能实现这些的需求.

2. 上线成本高, 不够敏捷

这里的“成本”并不是组件的修改成本高, 因为改变位置对程序员来说都是小意思, 这里的成本指的是时间成本. 因为网站上线会涉及一系列的准备工作, 比如代码修改, 代码提交, 代码测试, 最终再把网站上线.

image.png

同时花大部分时间做一些低价值的任务, 对程序员自身成长也不友好, 所以我们需要思考更优雅的方式.

3. 样式设计的局限性较大

比如我们要实现带背景的轮播图文案, 如果按照老路子开发, 程序员又得哗哗写代码了.

轮播图这类对外展示信息的需求, 虽然大多不是企业的核心需求, 但是某些时候却对企业的形象和企业价值传递至关重要, 所以我们必须要及时响应需求的变化, 第一时间维护公司的形象.

怎么去做呢? 我的答案是: 让产品经理和设计师们自己去维护轮播图组件.

解决方案演示

  1. 解决轮播图组件图片和文本的位置相对比较固定, 不够灵活的问题

image.png

  1. 解决轮播文本样式的局限性

image.png

轮播文案动画效果:

image.png

轮播和文案分离的课件式交互:

image.png

当然还有很多玩法等待大家开启, 如果我们把这个功能嫁接给产品或者业务人员, 那么将极大的解放程序员的双手, 也能极大的提高公司需求变更的响应速度.

接下来我就来分享一下如何实现轮播图和文本的跨越式通信.

技术实现方案

之前和大家分享了两期跨组件通信的技术方案, 我们继续沿用之前的方案, 来实现轮播图和文本的通信.

  1. 首先在轮播图组件中创建并触发自定义事件:
//  触发函数
const handleTrigger = (value: string) => {
    if(targetId) {
      document.dispatchEvent(new CustomEvent(`source_text_${targetId}`, { detail: value }))
    }
  }
  
// 当轮播图onchange时传递数据并触发
<Carousel
    className={cid}
    onChange={index => {
      // some code ...
      // 一触即发
      handleTrigger(_data.length ? _data[index]?.title : imgList[index]?.title);
    }}
    direction={direction}
    swipeable={swipeable}
    autoPlay={autoPlay}
    loop
    >
    {contentRender()}
</Carousel>
  1. 在文本组件中监听事件并响应数据回传
useEffect(() => {
    const eventName = `source_text_${id}`;
    function handleDataChange(event: any) {
      setData(event.detail);
    }
    document.addEventListener(eventName, handleDataChange)
    return () => document.removeEventListener(eventName, handleDataChange)
  }, [])

没错, 就这么点代码, 就实现了轮播图组件和文本组件的通信, 大家学会了吗?

当然底层上还是依赖Dooring零代码提供的便捷搭建能力和扩展能力, 让组件间通信能焕发出更大的价值. 如果大家想体验这一功能, 也欢迎线上使用, 同时也欢迎将这一方案用在自己公司的产品上, 更大的提高公司产研效率.

再展开想象, 这种方案不止于轮播图, 比如我之前分享的搜索和列表组件, 对于业务层, 应用这一方案可以发挥更大的价值.


目录
相关文章
|
关系型数据库 MySQL 数据库
深入MySQL数据库进阶实战:性能优化、高可用性与安全性
深入MySQL数据库进阶实战:性能优化、高可用性与安全性
818 0
|
Kubernetes 应用服务中间件 API
5 分钟了解 Kubernetes Ingress 和 Gateway API
5 分钟了解 Kubernetes Ingress 和 Gateway API
1230 0
|
10月前
|
人工智能 供应链 搜索推荐
数字孪生与零售业:优化库存与客户体验
数字孪生技术通过在虚拟空间中创建物理实体的镜像模型,实时反映状态和趋势,助力零售业优化库存管理和提升客户体验。在库存管理方面,数字孪生能实现智能预测、动态优化和供应链协同;在客户体验上,则能提供个性化推荐、虚拟试衣间和店内导航等服务,推动零售业向智能化、个性化发展。
|
网络协议 Linux
Linux如何查询端口被占用?
在Linux环境中,查询端口占用可使用`netstat`、`lsof`和`ss`命令。`netstat -tulnp | grep 80`显示TCP/UDP监听端口,`lsof -i:80`列出使用80端口的进程,而`ss -tuln | grep 80`是`netstat`的现代替代选项。若需解决端口占用问题,先找出占用进程的ID,然后用`kill -9`命令终止它,或调整服务配置以避免冲突。
897 2
|
开发工具 数据安全/隐私保护 git
解决TortoiseGit每次Pull或者Push都需要输用户名密码的问题
解决TortoiseGit每次Pull或者Push都需要输用户名密码的问题
280 0
|
Java Spring
快速解决Spring Boot跨域困扰:使用CORS实现无缝跨域支持
这是一个简单的配置示例,用于在Spring Boot应用程序中实现CORS支持。根据你的项目需求,你可能需要更详细的配置来限制允许的来源、方法和标头。
1266 3
|
移动开发 前端开发 JavaScript
uniapp改变radio大小-属性transform: scale()
uniapp改变radio大小-属性transform: scale()
369 0
|
消息中间件 监控 前端开发
RabbitMQ通过HTTP API获取队列消息内容
RabbitMQ通过HTTP API获取队列消息内容 背景 为配合公司数据中台建设,我们对公司内部使用的mysql binlog数据分发中间件(现已开源:https://gitee.com/kekingcn/keking-binlog-distributor )进行定制化改造,使其能够同时支持re.
|
计算机视觉
opencv出错:error: (-213:The function/feature is not implemented) Unknown/unsupported array type
opencv出错:error: (-213:The function/feature is not implemented) Unknown/unsupported array type
598 0
|
存储 Kubernetes 监控
PolarDB-X 混沌测试系统搭建赛题解析 | 学习笔记
快速学习 PolarDB-X 混沌测试系统搭建赛题解析
PolarDB-X 混沌测试系统搭建赛题解析 | 学习笔记

热门文章

最新文章