ios顶部导航栏


顶部导航栏,使用SBScrollNavigation

#pragma mark - SBScrollNavigation

- (NSInteger) numberOfMenuItems {

    if (self.category==nil) {

        CommenData *c= [[CommenData alloc]init];

        self.category=[c getCategory];

    }

    return [self.category count]+1;

}

// Or use a button (DON'T USE BOTH)

- (NSString *) scrollView:(SBScrollNavigation *)scrollView titleForMenuIndex:(NSInteger) index {

    if (index==0) {

        return @"推荐";

    }else{

        return [self.category[index-1] classNames];

    }

}

//

-(NSInteger)getCategoryIndex:(NSInteger) indexC{

    if (indexC==0) {

        return 0;

    }else{

        return [[self.category[indexC-1] classId]intValue];

    }  

}


// Get notified, when a menu Item is selected

- (void) scrollView:(SBScrollNavigation *)scrollView menuItemSelectedAtIndex:(NSInteger) index {

    [[[CommenData alloc]init] setCategoryIndex:[self getCategoryIndex:index]];  

    CGRect r = [[UIScreen mainScreen] applicationFrame];

    self.tableScroll.contentOffset=CGPointMake(r.size.width*index, 0);

}

页面滚动时导航自动变化

/* setSelectedIndex:(NSInteger)index

 *

 * Method to set the selected button. Can

 * be called to programatically set the selected

 * button.

 */

- (void) setSelectedIndex:(NSInteger)index {

  _selectedButton =index;

  UIView *button = [self viewWithTag:_addTag+index];

  [self scrollRectToVisible:button.frame animated:YES];

  [self setNeedsLayout];

  [self layoutIfNeeded];

}


设置导航栏宽度

//设置导航栏宽度


    CGRect r = [[UIScreen mainScreen] applicationFrame];


    self.navigationItem.titleView.frame=CGRectMake(0, 0, r.size.width, 40);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
***于Vue.js的跨平台开发框架,可以用于开发iOS、Android和Web应用。要封装顶部导航,可以通过以下步骤进行: 1. 在uniapp的项目目录中找到`/common`或者`/components`文件夹,没有的话可以自己创建一个。 2. 在该文件夹下创建一个新的Vue组件,比如命名为`TopNavBar.vue`。 3. 在`TopNavBar.vue`组件中,编写顶部导航的布局和样式。 4. 使用props接收需要的参数,比如导航的标题、是否显示返回按钮等。 5. 在`TopNavBar.vue`组件中,处理返回按钮点击事件,并通过emit向父组件传递事件。 6. 在需要使用顶部导航的页面中,引入`TopNavBar.vue`组件,并传入相应的参数。 以下是一个简单的示例代码: ```vue <template> <div class="top-nav-bar"> <div class="back-btn" @click="handleBack"> 返回 </div> <div class="title">{{ title }}</div> </div> </template> <script> export default { props: { title: String, showBackBtn: { type: Boolean, default: false } }, methods: { handleBack() { this.$emit('back'); } } } </script> <style scoped> .top-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #333; color: #fff; } .back-btn { cursor: pointer; } .title { font-size: 18px; font-weight: bold; } </style> ``` 使用时,在需要的页面中引入组件,并传递相应的参数: ```vue <template> <view> <top-nav-bar title="顶部导航" show-back-btn @back="handleBack"></top-nav-bar> <!-- 页面内容 --> </view> </template> <script> import TopNavBar from '@/components/TopNavBar.vue' export default { components: { TopNavBar }, methods: { handleBack() { // 处理返回按钮点击事件 } } } </script> <style> /* 样式 */ </style> ``` 通过以上步骤,你就可以在uniapp中封装顶部导航组件,并在需要使用的页面中引入和使用了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值