Flex组件自定义滚动条的实现(真)

最近项目中要求滚动条加上自己的样式,于是Google找答案。

结果找到一群类似的是说,滚动条中间的小图标会拉伸。无语... ...

 

实际上只是那些人不懂而已。Flex这么强大,怎么可能有这种问题。

 

(下面这段代码是网上的代码,使用后是没有小图标的,或者有的网站说使用九宫截图的方式加上下图标)

 

.scrollBar{
 downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
 downArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
 downArrowDownSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
 downArrowDisabledSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
 
 upArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
 upArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
 upArrowDownSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
 upArrowDisabledSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
 
 thumbDownSkin:Embed(source="img/mainLeftScrollBar/bar_middle_down.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
 thumbUpSkin:Embed(source="img/mainLeftScrollBar/bar_middle.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
 thumbOverSkin:Embed(source="img/mainLeftScrollBar/bar_middle_over.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
  
    trackSkin:Embed(source="img/mainLeftScrollBar/bar_bg.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
}

 

 

于是看API文档ScrollBar这个类中明确指明了很多属性。

其中有一条就是

thumbIcon-----该类用作滚动条的缩略图的图标。 默认值为 "undefined".

所以,

在上面的代码基础上加上

thumbIcon:Embed(source="img/mainLeftScrollBar/thumb.png");

这句,滚动条中间的那个小图标就出来了。

---------------------------------------------------------------

PS:那些错误的文章就不要转发N次了,误导人,看那东西还不如自己看API来得快

 

 

基于SpringBoot 3 + Vue 3的全栈民宿预约管理系统设计与实现 文章将详细阐述系统的需求分析、架构设计、数据库设计、核心功能模块的实现(包括用户认证、房源管理、订单流程、支付集成等),并提供关键代码片段,最后对系统进行总结与展望。.requestMatchers("/api/admin/**").hasRole("ADMIN") // 管理员接口。.requestMatchers("/api/auth/**").permitAll() // 认证接口公开。.requestMatchers("/api/public/**").permitAll() // 公开资源。 阅读详情

相关推荐

别再只盯着Text-VQA了!这4个主流VQA数据集(含中英双语)的保姆级下载与对比指南

本文深入解析了Text-VQA、ST-VQA、OCR-VQA和EST-VQA这4个主流视觉问答数据集的特性与应用场景,提供了详细的下载与预处理指南。通过对比分析,帮助开发者根据项目需求选择最适合的数据集,避免因选型不当导致的模型性能问题,特别适合需要处理中英双语或多模态文本理解的AI项目。

weixin_42524708的博客 362

使用flex布局实现局部滚动条

使用flex布局实现局部滚动条

weixin_45272209的博客 5335

从零开始:使用英伟达nx开发板部署目标检测算法的全过程

英伟达nx开发板烧录、依赖安装、开发板联网

weixin_51192760的博客 3762

最简单的使用flex布局实现局部滚动条

高度定高 内容超出 滚动条不设置为整页而是在局部。如果还实现不了的话,在去慢慢翻下文档吧!使用flex布局实现局部滚动条。

weixin_45961433的博客 740

从理论到代码:如何用随机矩阵理论(RMT)优化你的微生物共现网络分析?

本文详细介绍了如何利用随机矩阵理论(RMT)优化微生物共现网络分析,解决传统阈值法的主观性和不稳定性问题。通过R语言实现端到端的分析流程,包括矩阵标准化、本征值谱分析和自动阈值确定,显著提升网络构建的准确性和可靠性。该方法特别适用于高通量测序数据,能自动识别噪声与真实信号的边界,为微生物组学研究提供更精确的互作网络分析工具。

weixin_29096377的博客 363

labview设置工业摄像头外部触发

使用labview对海康MV-CA013-GM相机设置外部触发。 一、硬件部分 1、硬件引脚定义 2、触发模式设置 相机的触发模式分为两种,一种是内触发模式、另外一种是外触发模式。 3、接线图 信号线的地要跟给信号的设备共地。信号线给高电平时触发拍照。 二、软件部分 1、创建vision acquisition 2、选择使用的摄像头。 3、选择模式。 4、在Acquisition Control中设置这些选项。 5、设置保存图片路径 设置保存路径和保存图片的格式。点击完成即可 参考:https:/

qq_43493715的博客 5665

flex 布局实现局部 区域滚动

需求描述: 头部固定不动,内容部分区域滚动。

tengyuxin的博客 1491

YOLOv5源码逐行超详细注释与解读(1)——项目目录结构解析

全网最全YOLOv5项目目录结构超详细分析。逐个文件注释,小白上手必备

路人贾的博客 9万+

flex布局中子元素内容超出时,子元素本身出现滚动条实现方法

flex布局中子元素宽度平均分配,并且当子元素内容超出时,子元素本身出现滚动条

Misnice的博客 2236

SAP-ABAP:ABAP Development Tools(ADT)安装配置学习分享教程-第一篇:ADT安装前置准备与环境校验教程

ABAP Development Tools(ADT)安装配置教程摘要 本文是ADT安装系列的第一篇,重点讲解环境准备与版本校验。ADT是基于Eclipse的现代ABAP开发工具,相比传统SAP GUI提供更智能的开发体验。安装前需确认: 推荐使用Eclipse 2026-03 + Java 21组合 操作系统需Windows 10+/macOS 14+ SAP GUI版本要求Windows≥8.00/macOS≥8.10 后端系统需NetWeaver 7.31 SP04+或S/4HANA 通过java -

baidu_35680696的博客 690

Windows 11 安装、使用 Git:下载、安装、概念、命令、分支模型

本文详细介绍了在 Windows 11 系统上安装与使用 Git 的完整流程,涵盖从官方或国内镜像下载安装包、关键安装选项配置,到 Git 核心概念(如工作区、暂存区、分支、远程仓库等)的通俗解释。同时梳理了常用命令与五种主流 Git 分支模型(如 Git Flow、GitHub Flow 等),帮助开发者根据项目规模选择合适的工作流,是面向初学者与进阶用户的实用指南。

寒水馨 · 轻量级技术文档 · hanshuixin.org 2389

使用flex布局实现滚动的效果-不用计算高度

flex布局下,设置盒子滚动条

weixin_47544559的博客 1788

MIPI CPHY学习笔记01:TX物理层一致性测试项解析(LP信令模式)

在手机、平板、智能手表等移动设备中,MIPI C-PHY是负责图像、数据传输的核心接口,它就像设备内部的“高速数据线”,而低功耗(LP)信令模式,是这条“数据线”的“省电模式”,专门用于设备待机、低负载等场景,既要保证信号稳定,又要最大限度降低功耗。物理层一致性测试,就是给这个“省电模式”做的“全面体检”,确保不同厂商的设备能兼容互通。今天,我们就聚焦MIPI C-PHY TX(发射端)的Group 1 LP信令测试,用通俗的语言拆解8个核心测试项,看懂“省电信号”的合格标准。

一只豌豆象的博客 303

Flex中怎么给表格中的滚动条定位

1、问题背景        如果表格中的字段过多,会出现滚动条,在将滚动条滚到一定的位置时,重新刷新表格,滚动条会回到原处,原来查看的字段还得继续滚动,才能查看到。 2、实现实例 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/sp

游海东的技术专栏 2300

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Flex: DataGroup 组件增加滚动条

本想用mx:List 实现一个联系人列表,无奈AS4不知怎改变List的默认白色 背景,折腾了很久,只有用s:DataGroup 实现,又发现没有滚动条,得自己实现。

Winters_huang'Blog 2631

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

解决关于flex程序中浏览器缩小到某个值时出现滚动条

解决关于flex程序中浏览器缩小到某个值时出现滚动条   --------------------------------------------------- author: 小滕time    : 2011-6-26     原 问 题 描 述:    当要求浏览器宽度缩小到500时,横向出现滚动条的问题。   解决遇到的问题:    1.Flex的模板中body的属性中默认s...

VVhome 776

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Flex:自定义滚动条样式/隐藏上下箭头

 Flex组件自定义滚动条的实现css代码:.scrollBar{ downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png"); downArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png"); downArrowDow

Winters_huang'Blog 6453

Flex4组件定位和容器布局--对滚动条的理解

来自:http://blessht.iteye.com/blog/1130475 首先了解一个基础定义:容器和组件,组件是button、textInput等用于显示的基础控件,容器是用来存放组件的,多个组件可以放在同一容器中。 Flex的依靠容器来执行布局,大多数Flex容器使用预定义的规则集来自动定位您在其内定义的所有子组件。Flex 4 容器可以提供一套默认的布局:Basic...

arodevuw971002的博客 208

自定义FLEX滚动条滑块样式

在Flex里我们可以使用downArrowSkin,upArrowSkin,trackSkin,thumbSkin方法的设置滚动条的样式.. 不过由于设计的关系.. 滚动条的thumbSkin常设置成一个"点"或一个"块".. 这个块是固定大小的..不像Flex自带的滚动条会随滚动区域的高度而改变.. 如果直接设置thumbSkin,那滑块将拉变形~非常难看.. 这时候我们可以使用verticalScrollBar里的setScrollProperties方法来调整滑块高度..   

wkyb608的专栏 1631

Vue + Element Plus 的 Card组件显示滚动条

本文介绍了Element UI中card组件的使用方法,重点解决当card组件采用flex布局填充剩余空间时无法显示滚动条的问题。通过设置父组件为flex布局,card组件使用flex-1填充剩余空间,并配合:deep穿透子组件样式设置,最终实现header固定、footer固定、中间内容区域自动滚动的效果。文章提供了完整的代码示例和效果图,并指出类似方法在el-table组件上可能存在的问题仍需进一步验证。

申无轩的博客 1355

小程序界面布局出现滚动条、滚动组件的坑、flex布局的坑

刚接触小程序不久,在公司琢磨了好久,发现了几个小程序的坑。 1.界面中明明设置了overflow:hidden和高度:100%,结果在真机测试的时候,界面就是出现滚动条的情况。 这种情况需要在加一个page样式: page{ overflow: hidden; height: 100%; } 这样就能解决问题了。 2.使用scroll-view组件的时候,总是显示不齐所有的内容,这是由于对于scroll组件,我们都是设置了固定的高度,和overflow:hidden的样式,如果要显示齐所有的内容,

weixin_45172119的博客 3401

【code】flex给组件添加滚动条

最近打算吧硬盘中的资料记录在博客中, 在flex前台,有时会出现页面撑出付组件,而不出现滚动条的情况。(时间过去很久了,具体的场景记不起来了。) 可以再外面加一层Scroller 解决。 <mx:Grid id="grid" width="100%" borderColor="#E6E6E6" borderStyle="none" horizontalGap="-1"

Bug管理员 973

flex 滚动条居左 及 addElement()方法内部实现问题

公司一个项目要实现聊天是模块,具体需求是滚动条居左,置底,采用TextLine类实现图文混排以提高效率。由于textLine不支持html,所以需要重写一个类。lash里处理只读字体效率最高的类是TextLine,而非TextField。对滚动条居左,我采用办法是左右并排两个两个Canvas容器,用group剪裁右边容器的滚动条,把左边容器位置设置成负的,只显示一个滚动条,然后利用代码控制左边滚动条与右边同步,代码如下

floog的专栏 1261
上一篇: Flex中存储key-value关系
下一篇: AIR程序的种类
Javaaba521
博客等级 码龄18年 2粉丝 18原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值