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

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

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

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

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

效果图

.wxml页面

<!-- nav导航 -->

<view class="goods"银滚>

  <block wx:for="{{tab}}" wx:key="key">

    <view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view>

  </block>

</view>

<!--导航下  视图滑块 -->

<swiper bind:change="changeTab" current="{{index}}">

   <block>

     <swiper-item>

     <text>11111</text>

     </swiper-item>

     <swiper-item>

     <text>2222</text>

     </swiper-item>

     <swiper-item>

     <text>3333</text>

     </swiper-item>

   </block>

</swiper>

.js页面

Page({

    data: {

       tab:[

  谈兄       {titcle:"商品参数",style:"color"}, 

         {titcle:"商品介绍",style:""},

         {titcle:"商品规格",style:""},

        ],

        index:0,

       goods:''

    },

       tarClick(e){

          //  console.log(e.currentTarget.dataset.index)

           let tab = this.data.tab

          let that = this

          let index = e.currentTarget.dataset.index

           console.log(index)

          tab.map((item,key)=>{

     含搏袭      if(key==index)

           {

              tab[key]['style']='color'

           }else{

             tab[key]['style']=''

           }

          })

          that.setData({tab,index})

       },changeTab(e){

          console.log(e.detail.current)

          let tab = this.data.tab

          let that = this

          let index = e.detail.current

           console.log(index)

          tab.map((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color'

           }else{

             tab[key]['style']=''

           }

          })

          that.setData({tab,index})

       },

}）

.wxss页面

/* pages/details/details.wxss */

.goods{

    width: 100%

    height: 100rpx

    /* background-color:yellowgreen */

    display:flex

    justify-content: space-around

    align-items: center

}

.goods view{

    width: 160rpx

    height: 100rpx

    display: flex

    justify-content: center

    align-items: center

}

.color{

    color: red

    border-bottom: 2px solid red

}

search.wxml部分内容：

<view class='search_box page_row'>

<view class='search'>

<view class='search_item'>

<icon class='search_icon' size='20' type='search'></icon>

<input value='' placeholder='搜索您要找的商品' bindinput='bindInput'/>咐皮

</雹好view>

</view>衡肆差

<view class='search_btn' bindtap='search'>搜索</view>

</view>

search.wxss样式部分：

.search_box{width:100%background:#2587f1padding:0 0 10pxdisplay: flexflex-direction: row}

.search{width: calc( 100% - 64rpx )}

.search_item{border: 1px solid #d0d0d0border-radius: 10rpxmargin-left: 20rpxbackground:#fff}

.search_item input{margin-left: 60rpxheight: 60rpxborder-radius: 5pxbackground:#fff}

.search_btn{width: 15%height: 60rpxline-height:60rpxtext-align: centerbackground:transparentcolor:#fff}

.search_icon{margin: 10rpx 10rpx 10rpx 10rpxposition: absoluteleft:25rpxz-index: 2width: 20pxheight: 20pxtext-align: center}

---