前言前端页面性能对用户留存、用户直观体验有着重要影响,当页面加载时间超过 2 秒后,加载时间每增加一秒,就会有大量的用户流失,所以做好页面性能优化,无疑对网站来说是一个非常重要的步骤。那如何才能知道一个页面的性能情况呢?知道了页面性能情况后又如何进行优化呢?一个页面的性能指标非常多,面对一大堆性能指标,可能一个老手也一时间不知道从何开始分析。而且不同团队,负责的业务不同,性能分析的指标也不能够一概
 内容ion-content改进此文档内容组件提供了一个易于使用的内容区域,并提供了一些有用的方法来控制可滚动区域。在一个视图组件中只应该有一个内容。如果需要其他可滚动元素,请使用ionScroll。内容区域还可以通过刷新组件来实现刷新 。用法<ion-content> Add your content here! </ion-content>要从页
简单介绍三个React组件吧。ImageTableFormReact-Image源码 Demo一个用于加载/预览图片的组件Image自动管理图片的loading和error状态, 并显示不同提示.通过IntersectionObserver来实现图片懒加载默认使用Preview来进行图片预览可以通过group来管理图片预览列表, 同一个group的图片会出现在预览列表中import { Image
前言有必要说明,这其实是一个很简单的功能,用原生实现也非常简单: #preview-zone { overflow-y: auto; overflow-x: hidden; height: 90%; width: 100%; } overflow是CSS的原生属性,x和y分别代表水平和垂直方向的滚动条: CSS overflow ÊôÐÔwww.w3school.com.cn
转载 2024-09-06 15:59:47
229阅读
滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%;
页面如果想实现滚动效果,首先想到的是overflow:auto或者scroll属性,但是这样会出现滚动条,如果想实现滚动效果,有没有滚动条的话,那么推荐使用better-scroll插件。 一、安装 在package.json里面加入better-scroll的依赖,然后使用npm安装。 npm install better-scroll –save-dev 二、引入better-scro
转载 11月前
775阅读
缘起标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了。即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升。客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任。不过,antd虽好
转载 2024-02-22 13:09:20
2032阅读
最近在写项目时使用antd来作为组件库,但是需要更改默认样式,所以在一点点改写样式,遇到两个坑记录一下问题一:加了列宽不生效并且列名和列值不对齐的情况设置的列宽为110px但是并不生效解决办法:正确高列宽生效方法为设置scroll:x的值为列宽总和scroll={{ x: dataList.length > 0 ? 660 : false, y: da
转载 2024-09-12 10:00:32
2242阅读
文章目录AmisAmis 安装新增页面关于amis样式最终呈现界面自由的左边栏菜单,本地Json保存菜单数据从服务器加载 menu菜单项保存在本地Json进一步优化修改app.tsx添加版本号菜单图标umi request 的简单修改修改service里面的api.ts设计React里面使用的Amis组件创建amis组件Hook 方式的挂载事件useStateuseEffectuseEffect
公司接了一个 Ant Design Pro 的项目,后台接口已经有了,需要搭建前端。因为是一个项目,所以这两个功能就一起讲了。后台接口:1、category_name(获取图片类型接口)    发送:无    接收:list(类型列表)2、upload(上传接口):    发送:image_name(文件名)
一、原生要获取盒子(元素)的滚动条位置,可以使用JavaScript的scrollTop和scrollLeft属性。这些属性用于获取或设置元素的垂直和水平滚动条位置。下面是获取盒子滚动条位置的示例:// 获取盒子元素 var box = document.getElementById('myBox'); // 获取垂直滚动条位置 var scrollTop = box.scrollTop; /
Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中,官方提供了一个Table 表格组件。我们先来介绍一下这个组件Table 表格组件https://vue.ant.design/components/table-cn基础用法 分页组件,部分字段高亮特殊显示等等。详细使用请查阅文档。筛选排序 当然也可以在列表上方做常规搜索,会在后面的S-Table组件中进
转载 2024-04-25 14:50:48
746阅读
.ant-table:hover .ant-table-content .ant-table-fixed-right .ant-table-body-outer .ant-table-body-inner::-webkit-scrollbar-thumb { background-color: #999;}
原创 2022-08-23 09:46:21
1985阅读
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table( HTML Table是指使用原生的 js 代码: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group }
antd-table 自定义实现排序滚动条与列拉伸列展示列排序滚动条列拉伸 由于项目需求,我使用了ant Degisn 的Table组件,随着需求的变化,在原有的表格上增加了列排序、滚动条、列拉伸以及固定列的功能(一万头XX在心中奔腾。。。)。刚开始听到需求时,我是不以为然的,毕竟ant都提供了对应的属性和方法嘛,不慌!。。。结果。。。脸都肿了。 只实现单一功能时,ant做的很完美,但是将这
转载 2024-08-11 08:03:38
250阅读
ant-design-pro 动态菜单-路由详解最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来,并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法,终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法 进入src/layouts/Basilay
转载 2024-04-16 22:19:11
195阅读
因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm。Github地址(求Star 求Star 求Star ?):https://github.com/sohobloo/react-native-modal-dropdownGithub上全英文的readme方便国际友人,这里就写个中文的吧。 react-native-mod
转载 3月前
401阅读
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。一、头部固定scroll属性:设置横向或纵向滚动,也可用于指定滚动区域的宽和高 <Card title="头部固定"> <Table
转载 2024-04-18 08:54:50
1508阅读
  回顾上一节,讲的是组合框控件Combo Box的使用。本节详解滚动条控件Scroll Bar的相关内容。滚动条控件简介  滚动条大家也很熟悉了,Windows窗口中很多都有滚动条。前面讲的列表框和组合框设置了相应属性后,如果列表项显示不下也会出现滚动条滚动条分为水平滚动条(Horizontal Scroll Bar)和垂直滚动条(Vertical Scroll Bar)两种。滚动条中有一个滚
转载 2024-04-28 14:46:24
295阅读
由于近来公司业务繁忙,以至于没时间去接着做antd的项目。emmm…后面应该还会忙些时间!antd的路由导航还是有些坑的,对习惯了element的小伙伴来说不那么理想。这里先记录一下如何通过路由来动态生成1~2级导航菜单了(之后会出三级及以上导航菜单爬坑日志)。注: 此文为过渡文,没怎么上心,表达不明之处还请见谅,另外,欢迎打扰~~~~项目在线地址 (有用的话,记得给个start哦)antd的a-
转载 2024-03-21 13:31:49
650阅读
  • 1
  • 2
  • 3
  • 4
  • 5