【ArkTS】向右看齐--解决Scroll子组件无法默认右对齐的问题
组件 解决 -- 无法 默认 对齐 scroll 问题
2023-09-11 14:17:16 时间
【关键字】
Scroll、Scroller、scrollEdge、文本右对齐
【问题描述】
在学习Scroll组件的使用时,本地使用的API版本是api 9,布局是这样的:使用row包裹Scroll,然后Scroll包裹Text,想要默认让文本显示的时候都是右对齐的,写的代码如下:
实现效果如下:
看着效果还可以,但是,当文本一旦超出显示,此时就会遇到问题了,就会变成默认左对齐了,简单测试一下,文本内容多填充一些:
显示效果如下:
总结:文本超出显示时,会出现默认左对齐的现象。
那么这个问题该如何处理呢,有没有什么方法可以实现默认右对齐呢?
【解决方案】
既然文本超出显示时会默认左对齐,那么有一个思路是这样的:在控件加载出来的极短的时间内,让它自动滚动到最右边就可以实现这个效果了。
首先,我们需要借助onAppear()这个事件方法,在组件加载显示时会触发这个回调,如下图:
参考文档如下:
然后,我们再借助setTimeout()实现一个500毫秒的延时操作。
最后,再借助于Scroller的scrollEdge()方法实现滚动到底部的操作。
实现的代码如下:
实现的效果如下:
通过以上这个方法,就可以顺利解决右对齐的问题啦。OK,今天就到这里了,下期再会!
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
相关文章
- 微信小程序 - 自定义弹窗组件
- 31 Vue组件中Slot插槽的使用1
- 【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法
- 【小程序】微信小程序button组件无法调整宽度的解决方法(已解决)
- sql2008 启动报错:应用程序的组件中发生了无法处理的异常和值不能为空 viewinfo(已解决!)
- 金融行业开源技术应用社区(FINOC)研讨实录:开源组件安全问题与升级方式
- Vue - 高效稳定的颜色选择器组件(支持鼠标拖动选择与手动输入16进制、rgb颜色值)
- uniapp - uview 组件库中 NoticeBar 滚动通知组件,设置为不滚动的 “静止“ 文字状态显示(禁止文字滚动让其静止,禁用翻滚轮播变为静止不动的状态显示)完美解决最新教程,全端兼容
- uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件(解决小程序、APP 无法使用 document.body.appendChild 插入组件节点)适配全端
- iview BackTop 返回顶部 组件无效解决
- VS2010创建MVC4项目提示错误: 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral,
- 【转】amCharts,一款值得推荐的Flash charts图组件
- fontawesome图标字体库组件在服务器上显示不出来图标的解决
- Flutter 组件教程之用于创建易于定制的水平和垂直步进器 (教程含源码)
- Vue知识点总结(10)——全局组件的创建和使用(超级详细)
- vue/uni-app 父组件异步动态获取数据后,子组件已加载完成 获取不到值的问题
- 小程序组件化、自定义组件 、自定义组件练习,组件与页面互相传值,插槽(slot)、 component构造器
- nuxtjs在vue组件中使用window对象编译报错的解决方法
- 基于 STM32CubeMX 添加 RT-Thread 操作系统组件(十四)- 内存管理
- 【HarmonyOS】【ArkUI】鸿蒙ArkUI开发框架ets开发中如何自定义组件
- 【快应用】text组件里的文字很多,旁边的div样式会被拉伸如何解决
- Delphi(Tuxedo,BDE,ADO)三合一数据集组件HsTxQuery
- 组件价格跳水 光伏产品面临量价齐跌
- Spring Cloud各组件