Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uni-app给uni-list设置圆角边框

uni-app给uni-list设置圆角边框

作者头像
大风写全栈
发布于 2024-10-30 11:17:12
发布于 2024-10-30 11:17:12
29202
代码可运行
举报
文章被收录于专栏:锤子代码锤子代码
运行总次数:2
代码可运行

uni-list是一个uni-app官方推出的列表组件.

假设有下面这样一个列表:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

给它设置样式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.uni-list-item{
    border-radius: 16rpx;
 }

搞定!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-10-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 锤子代码 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app实战之社区交友APP(9)我的页面开发
本文主要介绍了我的(个人中心)页面开发,包括以下几方面: 个人中心和设置页面开发,包括页面配置、个人中心和设置页UI构建; 修改密码和邮箱页面开发,包括修改密码UI构建和表单验证、修改邮箱UI构建和表单验证; 编辑资料页面开发,包括页面UI构建、修改头像、昵称、性别、情感、职业、生日和城市功能实现; 帮助反馈和关于页面开发。
cutercorley
2021/02/22
2.7K1
uni-app实战之社区交友APP(9)我的页面开发
uni-app(优医咨询)项目实战 - 第4天
此处的权限验证是指服务端接口验证码 token 是否存在或有效,这就需要我们在调用接口时将 token 以自定义头信息的方式发送给服务端接口,如果 token 不存在或者 token 过期了,则接口会返回状态码的值为 401。
程序员朱永胜
2024/04/25
3410
uni-app(优医咨询)项目实战 - 第5天
按 easycom 组件规范新建组件,该组件的交互逻辑在前面阶段已经完成了,将其拷贝过来即可。
程序员朱永胜
2024/04/25
4050
uni-app(优医咨询)项目实战 - 第5天
uni-app(优医咨询)项目实战 - 第6天
在患者列表中选择需要问诊的患者,访部分的逻辑在家庭档案管理模块已经实现过了,偷懒将之前的代码拷贝过来(当然也可进行更完善的封装)。
程序员朱永胜
2024/04/25
3780
如何高效的阅读uni-app框架?(建议收藏)
uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯。
达达前端
2019/11/27
1.5K0
uni-app实战之社区交友APP(5)搜索和发布页开发
本文先介绍了搜索页的开发,包括页面的搭建(搜索框、搜索历史和搜索结果)和搜索逻辑的优化; 再重点介绍了发布页的开发:自定义导航栏的实现,文本输入框的实现,底部操作条图标和按钮的实现,图品上传和删除的实现以及编辑保存草稿的实现。
cutercorley
2021/02/02
2.8K0
uni-app实战之社区交友APP(5)搜索和发布页开发
uni-app实战之社区交友APP(4)首页开发
本文主要介绍了首页图文列表和滚动选项卡的开发: 图文列表的开发,包括顶部导航栏配置,图文列表项(头像、昵称、关注按钮、标题、标题封面图、点赞、踩、评论和分享)等的开发; 列表组件优化,包括分割线的开发和封装,动画特效实现,关注、顶踩功能的完善; 滚动选项卡开发,包括顶部选项卡开发、列表的同步显示和滑动,上拉加载的开发和封装,无数据组件开发等。
cutercorley
2021/01/29
2.9K0
uni-app实战之社区交友APP(4)首页开发
uni-app+flask 快速开发图像识别小程序
加上踩坑一共花了3个小时左右 代码已放置github https://github.com/dmhsq/image-recognition-flask-uniapp 效果如下 手机也跑通了 但是
代码哈士奇
2021/01/26
2.4K0
uni-app+flask 快速开发图像识别小程序
uni-app首页样式分享
分享一张首页样式 # 首页涉及内容 城市选择、轮播、一些列表 # 预览效果 # 代码 index.vue <template> <view class="page"> <uni-popup :
薛定喵君
2020/08/27
9920
uni-app首页样式分享
uni-app 之list
nvue其实就是weex的扩展,就是使用weex的时候可以使用list,但是我没有使用weex,我是用的vue,所以选择使用uni-list组件
赵哥窟
2021/12/16
1.4K0
uni-app 之list
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.4K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
黑马程序员uni-app 小兔鲜儿 项目及bug记录(上)
https://blog.csdn.net/qq_42880714/article/details/126509087
Qiuner
2024/07/20
5490
黑马程序员uni-app 小兔鲜儿 项目及bug记录(上)
uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法 https://www.jianshu.com/p/bc62c9e1beed
王小婷
2020/07/10
5K0
学习uni-app官方教程
从hello-uniapp中复制common文件夹以及static下面的uni.ttf文件到news项目同目录下
阿超
2022/08/16
1K0
学习uni-app官方教程
uni-app 之登录页面
学习了一周多uni-app,上一周主要是开发原生插件给uni-app调用。本周开始学习怎么使用uni-app写页面。学过vue的同学应该是毫无压力。原生开发的同学就有点吃力了。需要学一些vue基础才能开发。 开发iOS原生插件这有一篇不错的文章可以参考 uni-app 原生插件开发04 - 开发原生插件 uni原生插件开发教程
赵哥窟
2021/12/16
2.7K0
uni-app 之登录页面
uni-app实战之社区交友APP(6)动态页开发
本文主要介绍了动态页的开发,主要包括4部分: 顶部导航栏的开发; 关注列表页的开发,包括滑动滚动区域、联动、顶踩事件和上拉加载; 话题专题和分类页开发,包括热门分类组件、搜索框、轮播图、话题列表组件和话题分类页; 话题详情页开发,包括数据传递、话题介绍组件、精华帖子列表、列表选项卡组件和上拉加载更多。
cutercorley
2021/02/02
2K0
uni-app(优医咨询)项目实战 - 第7天
Socket.IO 是基于事件来实现数据通信的,事件的名称是由前后端商定好的,详见接口文档说明,消息的获取分成两种情况:
陶然同学
2024/06/03
3501
uni-app入门教程(2)页面样式、配置文件和生命周期
本文先介绍uni-app的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。
cutercorley
2020/12/16
2.9K0
uni-app入门教程(2)页面样式、配置文件和生命周期
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
程序员朱永胜
2024/04/18
2460
uni-app(优医咨询)项目实战 - 第1天
不会小程序设计?10分钟AI工具助你从需求到uniapp开发
之前2025年的年初开年之时,我立下了一个Flag,那就是写一个记账类型的小程序。
半月无霜
2025/03/29
1430
推荐阅读
相关推荐
uni-app实战之社区交友APP(9)我的页面开发
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验