tabbar的优雅设计

- (void)layoutSubviews {

[super layoutSubviews];

self.label.mm_center();

CGPoint center = self.label.center;

center.x = self.bounds.size.width/2.0;

center.y = self.bounds.size.height/2.0;

self.label.center = center;

self.layer.cornerRadius = 0.5 * self.bounds.size.height;

}

- (CGSize)sizeThatFits:(CGSize)size {

[self.label sizeToFit];

CGFloat width = self.label.bounds.size.width + 8;

CGFloat height = self.label.bounds.size.height + 2;

if (width < height) {

width = height;

}

return CGSizeMake( width, height);

}

### UniApp 中间凸起 TabBar 和过渡页设计方案 #### 1. **中间凸起 TabBar 的实现** 在 UniApp 中,可以通过自定义组件的方式实现一个带有中间凸起按钮的 TabBar。以下是具体实现方法: - 使用 `position: absolute` 将中间的凸起按钮放置在底部导航栏的中央位置。 - 利用 CSS 绘制圆形背景以及阴影效果来模拟凸起的感觉。 下面是代码示例: ```html <template> <view class="container"> <!-- 页面内容 --> <view class="content">这里是页面的内容</view> <!-- 自定义 TabBar --> <view class="custom-tabbar"> <view v-for="(item, index) in tabBarItems" :key="index" @click="switchTab(index)" class="tab-item"> {{ item.text }} </view> <view class="center-button" @click="goToTransitionPage"> <text>+</text> </view> </view> </view> </template> <script> export default { data() { return { tabBarItems: [ { text: '首页', icon: '' }, { text: '分类', icon: '' }, { text: '', icon: '' }, // 占位项 { text: '购物车', icon: '' }, { text: '我的', icon: '' } ] }; }, methods: { switchTab(index) { console.log(`切换到第${index}个选项`); if (index === 2) return; // 跳过中间占位项 this.$emit('tab-switched', index); }, goToTransitionPage() { uni.navigateTo({ url: '/pages/transition-page/index' }); } } }; </script> <style scoped> .container { display: flex; flex-direction: column; height: 100vh; } .content { flex: 1; background-color: #f8f8f8; } .custom-tabbar { position: relative; display: flex; justify-content: space-around; align-items: center; height: 100px; padding-top: 10px; background-color: white; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } .tab-item { flex: 1; text-align: center; } .center-button { position: absolute; top: -30px; left: calc(50% - 40px); /* 居中 */ width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background-color: #d9001b; color: white; font-size: 30px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } </style> ``` 上述代码实现了带有一个中间凸起按钮的 TabBar[^1]。通过点击该按钮可以跳转至过渡页面。 --- #### 2. **过渡页面设计** 对于过渡页面的设计,可以根据实际需求定制化布局。以下是一个简单的例子,展示如何创建一个具有动画效果的过渡页面。 ##### HTML 部分 ```html <template> <view class="transition-container"> <image src="/static/images/loading.gif" mode="aspectFit" class="loading-icon"></image> <text class="message">正在加载...</text> </view> </template> ``` ##### 样式部分 ```css .transition-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #ffffff; } .loading-icon { width: 100px; height: 100px; } .message { margin-top: 20px; font-size: 16px; color: #666666; } ``` ##### 功能逻辑 可以在页面加载完成后自动跳转回主界面或者执行其他操作: ```javascript onLoad() { setTimeout(() => { uni.navigateBack(); }, 2000); // 模拟延迟两秒返回上一页 } ``` 此代码片段展示了如何构建一个简单而优雅的过渡页面[^2]。 --- #### 3. **平滑滚动优化(可选)** 如果希望在过渡页面或其他场景中加入平滑滚动功能,则可以参考以下 CSS 实现方式[^3]: ```css body { scroll-behavior: smooth; } .scroll-anchor { scroll-margin-top: 50px; /* 可根据需要调整偏移量 */ } ``` 配合 JavaScript 完成更复杂的交互行为: ```javascript document.querySelector('.scroll-target').scrollIntoView({ behavior: 'smooth' }); ``` --- ### 总结 以上提供了两种核心解决方案:一是基于自定义组件完成中间凸起的 TabBar;二是针对过渡页面提供了一个基础模板并附带了平滑滚动的相关扩展建议。这些技术能够满足大多数开发者的日常需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值