仿照QQ的侧边效果,一行代码即可接入侧边栏

PSDrawerManager

侧边栏是现在app中很常用的一种UI展示方式,这里我封装了QQ的侧边栏进行了一下较为简单的封装,使用起来很简单,接入方式如下:

// tabBarController
PSTabBarController *tabBarVC = [[PSTabBarController alloc] init];    
// 左侧视图
LeftView *leftView = [[LeftView alloc] initWithFrame:CGRectMake(-self.window.width * (1 - kLeftWidthScale), 0, self.window.width, self.window.height)];    
// 接入侧边栏
[[PSDrawerManager instance] installCenterViewController:tabBarVC leftView:leftView];

如果你想要像QQ中一样,只有在tabBar选中某一项的时候才能够展示侧边栏,那么你可以像这样调用:

#pragma mark -
#pragma mark - UITabBarController protocol methods
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    if ([viewController isKindOfClass:[UINavigationController class]]) {
        UINavigationController *navigationController = (UINavigationController *)viewController;
        UIViewController *_viewController = navigationController.viewControllers.firstObject;        
        if ([_viewController isKindOfClass:[MessageViewController class]]) {
// 启动手势响应
            [[PSDrawerManager instance] beginDragResponse];
        } else {
// 取消手势响应
            [[PSDrawerManager instance] cancelDragResponse];
        }
    }
}

如果你想要点击侧边栏中列表的某一项,自动回到主控制器你可以这样:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // 回到中间控制器
    [[PSDrawerManager instance] resetShowType:PSDrawerManagerShowCenter];
// 在这里进行页面跳转
//    [navigationController pushViewController:viewController animated:YES];
}

只需要这几行代码就可以接入侧边栏,另外还提供了一些接口,大家可以查看"PSDrawerManager"文件,.h接口如下:

/** 设置中心控制器及左侧视图
 * @param centerViewController: 中心控制器
 * @param leftView: 左侧视图
 */
- (void)installCenterViewController:(UIViewController *)centerViewController leftView:(UIView *)leftView;

// 隐藏侧边阴影
- (void)hiddenShadow;

// 显示侧边阴影
- (void)showShadow;

// 开启拖拽响应
- (void)beginDragResponse;

// 取消拖拽响应
- (void)cancelDragResponse;

/** 设置显示状态
 * @param showType: 枚举类型 PSDrawerManagerShowType
 */
- (void)resetShowType:(PSDrawerManagerShowType)showType;

Demo展示:

PSDrawerManager.gif


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例代码,实现了一个倒计时效果: ```html <!DOCTYPE html> <html> <head> <title>倒计时示例</title> <meta charset="utf-8"> </head> <body> <div id="countdown"></div> <script> // 获取倒计时元素 var countdown = document.getElementById('countdown'); // 设置倒计时结束时间(假设设置为2022年1月1日0时0分0秒) var endTime = new Date(2022, 0, 1, 0, 0, 0); // 定时器,每秒更新一次倒计时 var timer = setInterval(function() { // 获取当前时间 var now = new Date(); // 计算距离结束时间的时间差 var diff = endTime.getTime() - now.getTime(); // 如果时间差小于等于0,清除定时器,显示倒计时结束 if (diff <= 0) { clearInterval(timer); countdown.innerHTML = '倒计时结束'; return; } // 计算剩余时间的小时、分钟、秒数 var hours = Math.floor(diff / (1000 * 60 * 60)); var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((diff % (1000 * 60)) / 1000); // 更新倒计时元素的内容 countdown.innerHTML = '距离2022年1月1日0时0分0秒还有:' + hours + '小时' + minutes + '分钟' + seconds + '秒'; }, 1000); // 每秒更新一次 </script> </body> </html> ``` 以上代码中,我们首先在页面中添加了一个 `<div>` 元素,用于显示倒计时。然后使用 JavaScript 代码实现了一个定时器,每秒更新一次倒计时。在定时器的回调函数中,我们首先获取当前时间和倒计时结束时间,计算它们之间的时间差,然后根据时间差计算剩余时间的小时、分钟、秒数,最后更新倒计时元素的内容。当时间差小于等于0时,清除定时器,显示倒计时结束。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值