星宿小程序怎么设置顶部分类导航

星宿小程序设罩孝雀置顶部分类导航步骤如下：

1、需要一个外层view，将内层水平的子view包含进来，保证内层view的灵活行，是用遍历tabs数组的形式进行。

2、物早水平平分导航栏包含一个外层view和多个内层view，内层view是水平排列，外层view需使用css的flex属性，同时内层各个view平分，内层view需要设置flex等于1。

3、在data中定义一个数组tabs，用慎郑于存放要展示的导航项，需要使用可滑动导航栏。

<view class="swiper-tab">    

    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view>    

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view>    

    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33</view>  

    <view class="swiper-tab-list {{currentTab==3 ? '正早on' : ''}}" data-current="3" bindtap="swichNav">44</view>  

    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55</view>         

</view>    

    

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">    

    <!-- 我是哈哈 -->    

    <swiper-item>    

      <view>我是哈哈</view>    

    </swiper-item>    

    <!-- 我是呵呵 -->    

    <swiper-item>    

      <view>我是呵呵</view>    

    </swiper-item>    

    <!-- 我是嘿嘿 -->    

    <swiper-item>    

      <view>我是嘿嘿</view>    

    </swiper-item>    

    <swiper-item>    

      <view>亏清御我是嘿嘿</view>    

    </swiper-item>    

    <swiper-item>    

      <view>我是嘿嘿</view>    

    </swiper-item>    

</swiper> .swiper-tab{    

    width: 100%    

    border-bottom: 2rpx solid #777777    

    text-align: center    

    line-height: 80rpx  

    }    

.swiper-tab-list{  font-size: 30rpx    

    display: inline-block    

    width: 20%   销岩 

    color: #777777    

}    

.on{ color: #da7c0c    

    border-bottom: 5rpx solid #da7c0c}    

.swiper-box{ display: block height: 100% width: 100% overflow: hidden }    

.swiper-box view{    

    text-align: center    

} var app = getApp()    

Page( {    

  data: {    

    /**  

        * 页面配置  

        */    

    winWidth: 0,    

    winHeight: 0,    

    // tab切换    

    currentTab: 0,    

  },    

  onLoad: function() {    

    var that = this    

    

    /**  

     * 获取系统信息  

     */    

    wx.getSystemInfo( {    

    

      success: function( res ) {    

        that.setData( {    

          winWidth: res.windowWidth,    

          winHeight: res.windowHeight    

        })    

      }    

    

    })    

  },    

  /**  

     * 滑动切换tab  

     */    

  bindChange: function( e ) {    

    

    var that = this    

    that.setData( { currentTab: e.detail.current })    

    

  },    

  /**  

   * 点击tab切换  

   */    

  swichNav: function( e ) {    

    

    var that = this    

    

    if( this.data.currentTab === e.target.dataset.current ) {    

      return false    

    } else {    

      that.setData( {    

        currentTab: e.target.dataset.current    

      })    

    }     

  },  

 /** 

  * 点击分享 

  */  

  onShareAppMessage: function () {  

    return {  

      title: '装逼小程序',  

      path: '/page/user?id=123'  

    }  

  }  

})

一、设置自定义顶部导航

Navigation是小程序袭宽的顶部导航拍核亮组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏。

1.全局顶部导航自定义，在app.json的“window”里添加"navigationStyle": "custom"

2.只在某一个页面自定义顶部导航，在该页面的json文件里添加"navigationStyle": "custom"

二、氏哪具体的导航块根据需要自行书写

---