uni-app给uni-list设置圆角边框
uni-app给uni-list设置圆角边框
大风写全栈
发布于 2024-10-30 11:17:12
发布于 2024-10-30 11:17:12
代码可运行
运行总次数：0
代码可运行
uni-list是一个uni-app官方推出的列表组件.
假设有下面这样一个列表:
<uni-list>
<uni-list-item :show-extra-icon="true" :extra-icon="{color: '#FDC21E',size: '22',type: 'wallet'}"
clickable title="第一项" :show-arrow="true"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="{color: '#34D194',size: '22',type: 'bars'}"
clickable title="第二项" :show-arrow="true"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="{color: '#5ACDFE',size: '22',type: 'calendar'}"
clickable title="第三项" :show-arrow="true"></uni-list-item>
</uni-list>
给它设置样式:
.uni-list-item{
border-radius: 16rpx;
}搞定!
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2024-10-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
