uni-app打卡学习第03天：布局和弹窗

前置基础已掌握页面路由、导航栏、基础页面跳转今日目标掌握移动端常用Flex弹性布局实现项目通用卡片 UI圆角、阴影、边距学会点击事件click、弹窗uni.showToast/uni.showModal整合页面样式与交互完成首页卡片、个人中心退出功能一、核心知识点笔记1. Flex 弹性布局移动端主流布局专门适配移动端快速实现横向 / 纵向排列、居中、均分布局uni-app项目必备。开启弹性布局给父容器添加display: flex;常用属性父容器flex-direction: column纵向排列默认flex-direction: row横向排列justify-content: center水平居中align-items: center垂直居中justify-content: space-between两端对齐中间留白2. 卡片样式核心属性业务页面高频组件统一视觉风格background: #fff卡片白色底色border-radius圆角单位rpxbox-shadow阴影增加层次感padding内边距控制内容与卡片边缘距离margin外边距控制卡片之间间距3. 基础交互点击事件绑定点击事件click方法名写在标签上在script的methods中定义对应方法编写逻辑4. 弹窗 APIuni-app 内置轻提示短暂自动消失jsuni.showToast({ title: 提示文字, icon: success // success / none })确认弹窗需手动点击确定 / 取消jsuni.showModal({ title: 标题, content: 内容, success: (res) { if(res.confirm){ // 点击确定执行逻辑 }else{ // 点击取消执行逻辑 } } })二、详细实操步骤实操 1优化首页编写卡片布局需求在首页实现两张数据卡片使用 Flex 圆角阴影样式打开pages/index/index.vue替换全部代码vuetemplate view classcontainer !-- 卡片1 -- view classcard view classcard-title数据卡片 一/view view classcard-descuni-app 移动端页面开发/view /view !-- 卡片2 -- view classcard view classcard-title数据卡片 二/view view classcard-desc对接 JDK21 JavaWeb 接口/view /view /view /template script export default { } /script style scoped /* 外层容器 */ .container { padding: 30rpx; /* 纵向排列 */ display: flex; flex-direction: column; gap: 25rpx; /* 卡片之间间距 */ } /* 通用卡片样式 */ .card { background: #ffffff; border-radius: 12rpx; /* 圆角 */ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06); /* 阴影 */ padding: 35rpx; /* 卡片内边距 */ } /* 卡片标题 */ .card-title { font-size: 34rpx; font-weight: 500; color: #333; margin-bottom: 15rpx; } /* 卡片描述 */ .card-desc { font-size: 28rpx; color: #666; line-height: 1.6; } /style运行项目查看效果页面出现两张独立卡片带圆角、阴影排版整洁缩放浏览器尺寸自动适配rpx生效实操 2给卡片添加点击事件 轻提示需求点击任意卡片弹出showToast提示修改index.vue给card标签绑定点击事件vueview classcard clickclickCard(卡片一) view classcard-title数据卡片 一/view view classcard-descuni-app 移动端页面开发/view /view view classcard clickclickCard(卡片二) view classcard-title数据卡片 二/view view classcard-desc对接 JDK21 JavaWeb 接口/view /view在script中新增方法jsexport default { methods: { // 卡片点击事件 clickCard(name) { uni.showToast({ title: 你点击了${name}, icon: none }) } } }运行测试点击卡片底部弹出文字提示2 秒后自动消失实操 3个人中心页 - 退出按钮 确认弹窗需求在个人中心页面添加「退出登录」按钮点击弹出确认框打开pages/user/user.vue替换全部代码vuetemplate view classcontainer view classuser-info text classname系统管理员/text /view !-- 退出按钮绑定点击事件 -- view classlogout-btn clicklogout退出登录/view /view /template script export default { methods: { logout() { // 确认弹窗 uni.showModal({ title: 操作提示, content: 确定要退出当前账号吗, success: (res) { // 点击确定 if (res.confirm) { uni.showToast({ title: 退出成功, icon: success }) } // 点击取消无额外操作 } }) } } } /script style scoped .container { padding: 40rpx; display: flex; flex-direction: column; align-items: center; /* 整体水平居中 */ } .name { font-size: 36rpx; color: #333; margin: 40rpx 0; } /* 退出按钮样式 */ .logout-btn { width: 280rpx; height: 80rpx; line-height: 80rpx; text-align: center; background: #23262E; color: #fff; border-radius: 8rpx; font-size: 30rpx; } /style运行项目切换到底部「个人中心」功能测试点击「退出登录」弹出确认框点击确定提示「退出成功」点击取消弹窗关闭页面无变化实操 4拓展练习 - 横向布局选做需求改造首页实现两张卡片横向并排修改首页外层容器样式css.container { padding: 30rpx; /* 改为横向排列 */ display: flex; flex-direction: row; gap: 25rpx; } .card { /* 两张卡片均分宽度 */ flex: 1; }运行查看两张卡片左右并排自适应屏幕宽度三、今日打卡清单✅ 1. 掌握 Flex 布局纵向、横向排列用法 ✅ 2. 完成通用卡片组件圆角 阴影 边距编写 ✅ 3. 成功绑定click点击事件实现卡片点击提示 ✅ 4. 个人中心退出按钮 uni.showModal确认弹窗功能正常 ✅ 5. 所有页面样式、交互无报错整体运行流畅四、课后拓展练习在消息中心页面msg.vue使用卡片样式编写 3 条消息列表给每条消息卡片绑定点击事件点击弹出对应消息名称五、常见问题排错点击事件不生效检查标签上click方法名 和methods内方法名是否完全一致弹窗不弹出代码拼写错误核对uni.showToast/uni.showModal完整名称Flex 布局排版错乱父容器忘记加display: flex;区分flex-direction: row / column阴影 / 圆角看不到单位错误移动端统一使用rpx不要混用px