首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    学用Hooks写React组件——基础版移动端无缝轮播图组件

    因为最近在做移动端的东西,所以尝试写一个移动端的无缝轮播图,当前版本只支持手势切换和点击切换功能。文章主要包括从简单雏形到最终效果所有的思路和代码。...轮播图子组件需要位置可移动所以都使用绝对定位。...import React, { useState, useEffect, useRef } from 'react'; import styles from '....现在我们再对此进行增加,加入手势的滑动,这里我引入了第三方库hammerjs来作为手势的处理 ...相同代码省略 import Hammer from 'hammerjs'; ... ...相同代码省略...总结 到这里,一个简易版的移动端手势滚动组件就完成了,里面还有很多的不足、功能缺陷和优化点,例如容器宽度和高度的判断,宽度直接取得手机宽度,高度我直接写死的;轮播子组件的懒加载等等,之后也会慢慢进行增强和优化

    3.9K20

    专为新兴框架Svelte打造的移动端组件库!

    今天,我们就接着分享一个专为 Svelte 打造的移动端组件库:STDF STDF 简介 Svelte 是一个新兴的前端框架,组件库不多,今天介绍 STDF 算是不可多得的一个组件库了。...STDF 是一个移动端的 UI 组件库,主要用来开发移动端 web 应用。和我们之前介绍过的许多组件库都不一样,它是基于基于 Svelte 和 Tailwind 开发的。...你可以认为这套组件库是专为 Svelte 打造的。 Svelte 简洁语法,主要是让原生 JS 代码有了响应式的能力,而且打包后的 web 应用很小,特别适合开发移动应用。.../> 这就是移动端常见的导航。 STDF 有一整套的应用组件,就像Element之于VUE,Ant Design 之于React。 更多组件的使用方法,请查看 STDF 官网的文档。...另一个问题是,STDF 组件主要用于移动端,面向 C 端用户。因此,对产品的性能、易用性和可用性要求很高,大家花费的的精力必然要多一些。 综合来说:如果追求极致的性能表现,就可以选择 Svelte。

    1.5K20

    轻量、可靠的移动端组件库 Vant 1.0 正式发布

    不管是 Vue ,还是 React ,还是微信小程序开发,其实都是大同小异,开发方式也都是响应式的开发,饿了么开源的 Element UI 也挺好的。...有赞技术团队开源的移动端组件库 Vant 1.0 正式发布啦。Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。...作为移动端组件库,Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。...支持通过 postcss 插件进行主题定制 官方 Demo 仓库 - vant-demo 基于相同视觉规范的小程序组件库 - zanui-weapp 开源社区的移动商城示例项目 - vant--mobile-mall...既然是移动端的组件库,那我们就来看看它包含哪些组件呢? ? 最后,大家可以长按扫描下方二维码,体验一下这些组件,在手机中的效果和效率,看看怎么样? 另外,我最近有点喜欢上 Vue 开发了。

    95130

    令人直呼 “哇塞” 的一套移动端 Flutter 组件库

    Flutter开发的App,其中不乏我们每天都使用的应用 像微信、QQ、闲鱼、淘宝、百度网盘、美团商家版、京东、B站、微博、链家等应用都使用了Flutter进行开发 而小师妹今天就给大家推荐一款企业级移动端...Flutter 组件库——Bruno Bruno Bruno 是基于一整套设计体系的 Flutter 组件库。...它是由贝壳「用户体验中心 & 移动端作业组」联合打造的一套企业级移动端 Flutter 组件库 特点 丰富的组件列表,涵盖常见的开发场景 提炼自企业级移动端产品的交互和视觉风格 开箱即用的高质量 Flutter...组件 提供满足业务差异的主题定制能力 提供设计资源文件包含原型和设计稿 组件 数据图表 底部菜单 导航栏 弹框 100+组件 使用 在Flutter工程目录下 pubspec.yaml 文件中加入

    1.5K20

    移动端左滑右滑组件

    最近有个需求,移动端有导航,需要左滑右滑的时候就能切换导航,跟轮播一样的效果,但是轮播内容少,而且是一次性加载数据。...自己写了个左滑右滑的组件。我一直觉得写组件最重要的就是理解原理和理清思路。...CurrentX-startX就是移动的距离,让当前父元素相对定位,然后随着移动定位left的值。这样就实现了一个元素左滑右滑的效果。...接着考虑当手指松开的时候触发touchEnd方法,获取endX,endX减去startX或者是移动过程中的距离,大于0就是手指向右滑动,小于0就是向左滑动。...因为是组件,我们把左滑还是右滑返回,把可能需要用到的移动过程中的距离也返回。最后,我们在移动一点点距离的时候不一定要左滑右滑,所以需要一个最小的滑动距离。

    1.1K10

    React的未来:服务端组件

    服务端组件是什么? 截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。...然而,React 团队正在试验一个新的想法,那就是将 React 组件区分为两个类型:客户端组件 和 服务端组件。...然而,客户端组件和服务端组件到底是怎么定义的? 首先,客户端组件指的就是现在我们日常开发中使用的 React 组件。...乍一看,服务端组件 类似于 服务端渲染(SSR),实际上,服务端组件的很多优势和服务端渲染也是很类似: 提供了直接访问服务端资源(如:数据库、文件系统、内部的微服务等)的可能,因此开发起来会更容易。...避免了不必要的客户端和服务端之间的交互,因此性能更快。 允许一些类库可以直接运行在服务端,因此减小了客户端包文件的大小。

    87310

    漫谈 React 组件库开发(二):组件库最佳实践

    那么现在就面临一个选择: 一是选择 React 生态中已有的组件库,例如 antDesign、Material-UI 等比较成熟的组件库; 二是团队再开发一套属于自己的组件库。...本文我们就来聊一聊如何开发一套优秀的 React 组件库以及一套完整组件库的构成。 一、选择开源?还是自己造轮子?...React 大环境里面有很多优秀的 UI 组件库,国内比较有名的 antDesign,国外的 Material-UI,都是比较稳定和优秀的组件库。那么我们为什么还要自己去开发一套组件库呢?...三、小结 在本文中,我们从组件的设计思路、编码规范、开发流程、测试、日常维护这五个方面阐述了如何构建一个 React 组件库,并且以 Zent 为例讲述了有赞是如何做的,任何一个组件库都需要的经过这个生命周期...我们需要想办法让更多的人参与其中,共同作为组件库的维护者,选择开源是为了给 React 生态环境做输出,在前端组件化已经成为了既定事实的今天,我们不需要重复的造轮子,而是需要在组件化方面尝试新的突破,脱离前端技术的束缚

    1.6K30

    Vant 1.0 正式发布:轻量、可靠的移动端 Vue 组件库

    Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。...一、关于 Vant 1.0 距离 Vant 首次发布刚好过去了半年时间,在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议,持续对组件进行打磨、优化,使得 Vant 逐渐成长为一个轻量、可靠的移动端...Vue 组件库。...GitHub 地址:github.com/youzan/vant 二、现有组件 ? 三、开发理念 轻量化 作为移动端组件库, Vant 一直将轻量化作为核心开发理念。...支持通过 postcss 插件进行主题定制 官方 Demo 仓库 - vant-demo 基于相同视觉规范的小程序组件库 - zanui-weapp 开源社区的移动商城示例项目 - vant--mobile-mall

    84320
    领券