more Table Bar 状态,访问more页面的控制

本文介绍如何禁用iOS应用中UITabBarController的编辑功能,并提供了修改more选项卡栏背景样式的代码示例。

 

1.禁用Edit功能

tabBarController.customizableViewControllers = nil;  

 

2.修改more中tabbar背景样式

tabBarController.moreNavigationController.navigationBar.barStyle=UIBarStyleBlackOpaque;

<template> <!-- 页面主容器,用于整体布局 --> <view class="page-container"> <!-- 医院 Logo 图片展示 --> <image class="hos-logo" src="/static/hos.jpg"></image> <!-- 医生个人信息区域 --> <view class="doctor-info"> <!-- 医院名称,突出显示 --> <text class="hos-name">第一人民医院</text> <!-- 医生姓名 --> <text class="doc-name">姓名:王晓惠</text> <!-- 医生性别与角色信息 --> <text class="doc-gender-role">性别:女 角色:医生</text> </view> <!-- 功能操作按钮栏,提供三个常用功能入口 --> <view class="action-bar"> <button class="action-btn notice">通知公告</button> <button class="action-btn add-patient">添加患者</button> <button class="action-btn scan-evaluate">扫码评价</button> </view> <!-- “姓名检索”文字标题 --> <view class="search-title"> <text>姓名检索</text> </view> <!-- 患者信息表格区域 - 已设置为蓝色背景区域 --> <view class="patient-table"> <!-- 表格头部,定义列名 --> <view class="table-header"> <text class="col-id">序号</text> <text class="col-name">姓名</text> <text class="col-gender">性别</text> <text class="col-age">年龄</text> </view> <!-- 使用 v-for 循环渲染患者数据行 --> <view class="table-row" v-for="(item, index) in patients" :key="index"> <text class="col-id">{{ item.id }}</text> <text class="col-name">{{ item.name }}</text> <text class="col-gender">{{ item.gender }}</text> <text class="col-age">{{ item.age }}岁</text> </view> </view> <!-- “更多”按钮区域,居中显示 --> <view class="more-section"> <button class="more-btn">更多</button> </view> </view> </template> <script> // Vue 组件逻辑部分 export default { data() { return { // 定义患者数据列表,对应界面中表格内容 patients: [ { id: 1, name: '赵世洪', gender: '男', age: 58 }, { id: 2, name: '李惠琴', gender: '女', age: 37 }, { id: 3, name: '李英', gender: '女', age: 26 }, { id: 4, name: '王贤', gender: '男', age: 33 } ] } }, onLoad() { // 页面加载时执行的生命周期函数 // 当前未添加具体逻辑,可后续扩展如请求患者数据等 }, methods: { // 预留方法区域,可用于添加事件处理函数 // 如:跳转详情页、搜索患者等 } } </script> <style> /* 页面整体容器样式 */ .page-container { font-family: 'Microsoft YaHei', sans-serif; /* 使用常见中文字体 */ background-color: #f8f8f8; /* 浅灰色背景,提升视觉层次 */ min-height: 100vh; /* 最小高度占满视口 */ padding: 20rpx; /* 内边距适配移动端 */ box-sizing: border-box; /* 盒模型包含内边距和边框 */ } /* 医院 Logo 样式 */ .hos-logo { width: 100%; /* 全宽显示 */ height: 180rpx; /* 设置高度 */ border-radius: 12rpx; /* 圆角边框 */ margin-bottom: 20rpx; /* 下方留白 */ } /* 医生信息卡片样式 */ .doctor-info { width: 100%; padding: 20rpx; background-color: #fff; /* 白色背景 */ border-radius: 12rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 轻微阴影 */ margin-bottom: 20rpx; } .hos-name { font-size: 44rpx; /* 大号字体 */ font-weight: bold; color: #000; display: block; margin-bottom: 16rpx; } .doc-name, .doc-gender-role { font-size: 30rpx; color: #333; display: block; line-height: 1.8; /* 行高优化可读性 */ } /* 操作按钮栏布局 */ .action-bar { display: flex; justify-content: space-around; /* 按钮均匀分布 */ width: 100%; margin-bottom: 20rpx; } /* 基础按钮样式 */ .action-btn { flex: 1; margin: 0 16rpx; font-size: 28rpx; padding: 24rpx 0; border-radius: 10rpx; text-align: center; color: #fff; font-weight: 500; } /* 不同功能按钮配色 */ .action-btn.notice { background-color: #007AFF; /* 蓝色 - 正式、通知类 */ } .action-btn.add-patient { background-color: #4CD964; /* 绿色 - 新增、成功类 */ } .action-btn.scan-evaluate { background-color: #FF9500; /* 橙色 - 交互、扫描类 */ } /* 姓名检索标题样式 */ .search-title { width: 100%; padding: 16rpx 20rpx; background-color: #fff; color: #000; font-size: 32rpx; font-weight: bold; border-radius: 12rpx 12rpx 0 0; /* 上圆角 */ } /* 患者表格外层容器 —— 改为蓝色背景区域 */ .patient-table { width: 100%; background-color: #e6f7ff; /* 浅蓝色背景,象征医疗与信任 */ border-radius: 0 0 12rpx 12rpx; overflow: hidden; border: 1rpx solid #bae7ff; /* 蓝色边框,强化区域边界 */ } /* 表头样式 —— 使用深蓝底色 + 白色文字 */ .table-header { display: flex; background-color: #1890ff; /* 主蓝色 */ color: #fff; padding: 20rpx 0; border-bottom: 1rpx solid #bae7ff; } /* 各列宽度分配与对齐方式 */ .col-id { width: 15%; text-align: center; font-weight: bold; color: #fff; } .col-name { width: 35%; text-align: left; padding-left: 20rpx; font-weight: bold; color: #fff; } .col-gender { width: 20%; text-align: left; font-weight: bold; color: #fff; } .col-age { width: 30%; text-align: left; font-weight: bold; color: #fff; } /* 数据行样式 */ .table-row { display: flex; padding: 20rpx 0; border-bottom: 1rpx solid #bae7ff; /* 使用浅蓝分隔线 */ } /* 最后一行去除下边框 */ .table-row:last-child { border-bottom: none; } /* 字体颜色与大小统一设置 */ .table-row .col-id, .table-row .col-name, .table-row .col-gender, .table-row .col-age { color: #333; font-size: 28rpx; } /* 姓名列左侧留白对齐 */ .table-row .col-name { padding-left: 20rpx; } /* “更多”按钮区域 */ .more-section { width: 100%; padding: 20rpx; display: flex; justify-content: center; /* 水平居中 */ } .more-btn { background-color: #f0f0f0; color: #333; font-size: 28rpx; width: 160rpx; height: 60rpx; line-height: 60rpx; /* 垂直居中 */ text-align: center; border-radius: 30rpx; /* 椭圆形按钮 */ padding: 0; } </style> 把这个加到医生首页
最新发布
09-27
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值