抽屉效果侧边栏

1,在一个普通的上图控制器上面添加一个tableview
list

@interface ListViewController ()<UITableViewDelegate,UITableViewDataSource>
{
    UITableView *tableview;
    NSMutableArray *ds;
    UISwipeGestureRecognizer *leftRecognizer;
    UISwipeGestureRecognizer *rightRecognizer;
}
@end

2,绑定这个tableview的代理

  tableview=[[UITableView alloc]initWithFrame:CGRectMake(0, 0, 0, WINDOW_HEIGHT)];
    tableview.dataSource= self;
    tableview.delegate=self;

3,设置相关的数据源

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier =@"cell";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell==nil)
    {
        cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    NSString *cellValue =[ds objectAtIndex:indexPath.row];
    cell.textLabel.text=cellValue;
    cell.selectionStyle=UITableViewCellSelectionStyleNone;
    cell.backgroundColor=[UIColor greenColor];
    return cell;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return ds.count;
}
/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%ld",(long)indexPath.row+1);

}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 40;
}
@end

实现原理:
在任意一个控制器里面都可以添加上tableview,并且将tableview的数据源与这个控制器绑定,然后再下面写代理里面的方法:cell、number、之类的数据源绑定方法;这样这个tableview就在这个视图里面加载成功了。

抽屉侧边栏是一种常见的网页布局,可以在网页的侧边展示菜单、导航或其他相关内容。在HTML中,你可以使用一些技术和样式来创建一个抽屉侧边栏。 首先,你可以使用HTML的 `<div>` 元素来创建一个容器,用于包含侧边栏的内容。给这个容器指定一个特定的ID或类名,以便后续的样式和JavaScript操作。 ```html <div id="sidebar"> <!-- 侧边栏内容 --> </div> ``` 接下来,你可以使用CSS来定义侧边栏的样式。你可以设置侧边栏的宽度、背景色、文字颜色等等。 ```css #sidebar { width: 200px; background-color: #f1f1f1; color: #333; /* 其他样式属性 */ } ``` 为了实现抽屉效果,你可以通过设置侧边栏的定位属性和过渡效果来实现展开和收起的动画效果。 ```css #sidebar { /* 其他样式属性 */ position: fixed; top: 0; left: -200px; transition: left 0.3s ease; } #sidebar.open { left: 0; } ``` 在JavaScript中,你可以通过操作侧边栏的类名来实现展开和收起的效果。你可以使用事件监听器来触发这些操作。 ```javascript const sidebar = document.getElementById('sidebar'); function toggleSidebar() { sidebar.classList.toggle('open'); } // 例如,点击按钮时切换侧边栏的展开和收起状态 const toggleButton = document.getElementById('toggle-button'); toggleButton.addEventListener('click', toggleSidebar); ``` 这只是一个简单的示例,你可以根据自己的需求进行样式和交互的调整。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值