Nissi商城首頁（二）：仿唯品會的搜尋和導航欄功能（完美）Nissi商城首頁（一）：仿唯品會的自定義頭部導航欄（完美）

一、前言

上一節實作了自定義頭部導航欄功能，可以相容适配各種機型，想要學習的可以看上一篇文章。

Nissi商城首頁（一）：仿唯品會的自定義頭部導航欄（完美）

咱們繼續實作商城首頁功能，接着參考唯品會的搜尋和導航欄功能，原始效果如下：

 二、功能分析

1、搜尋框：左側是放大鏡icon、右側是相機icon，點選輸入框可以跳轉到 搜尋曆史頁面。

2、導航欄：加載導航欄清單，點選不同的導航名稱有放大效果，下方内容進行切換。

三、開發

1、代碼目錄結構

├─pages

│   └─index

│              index.js

│              index.json

│              index.wxml

│              index.wxss       

2、代碼片段

page/index/index.wxml 部分

<view class="head_input">
    <image src="/images/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder="搜尋" placeholder-class="place_holder" bindconfirm="getData"
      value="{{search}}"></input>
    <image src="/images/camera_icon.png" class="camera_icon"></image>
  </view>
  <!--導航欄-->
  <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true"
    scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}">
    <view class="navigate-item" id="item{{index}}" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}"
      bindtap="tabNav">
      <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
      <view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view>
    </view>
  </scroll-view>
</view>      

page/index/index.js 部分

/**導航欄 */
    isRefresh: false,
    currentTab: 0,
    tabList: [
      {
      name: '推薦'
    },
    {
      name: '時尚'
    }, {
      name: '國際'
    }, 
    {
      name: '美妝'
    },
    {
      name: '母嬰'
    }, 
    {
      name: '居家'
    },
    {
      name: '運動'
    },
    ]

// 導航切換監聽
  tabNav(e) {
    let currentTab = e.currentTarget.dataset.index;
    this.setData({
      currentTab,
      tabName: this.data.tabList[currentTab].name
    })
  },
  handleSwiper(e) {
    let {current,source} = e.detail;
    if (source === 'autoplay' || source === 'touch') {
      const currentTab = current
      this.setData({
        currentTab,
        tabName: this.data.tabList[currentTab].name
      })
    }
  },      

page/index/index.wxss 部分

.head_input {
  position: relative;
  flex: 1;
  margin: 12rpx 10rpx;
}

.search_icon {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15rpx;
  width: 30rpx;
  height: 31rpx;
  padding-left: 26rpx;
}

.camera_icon {
  position: absolute;
  top: 50%;
  right: 23rpx;
  margin-top: -15rpx;
  width: 36rpx;
  height: 33rpx;
  /* padding-right: 23rpx; */
}
.head_input input {
  height: 68rpx;
  padding-left: 75rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
  background: #F5F5F5;
}
.place_holder {
  font-size: 30rpx;
  color: #999999;
}

.sha_icon{
  margin-left: 18rpx;
  font-size: 28rpx;
  color: #333333;
}

/*******導航欄********/
.scroll-wrapper {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background: #F13B7F;
  height: 68rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}
/* 去掉滾動條 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.navigate-item {
  display: inline-block;
  text-align: center;
  height: 65rpx;
  line-height: 65rpx;
  margin: 0 30rpx;
}

.names {
  font-size: 28rpx;
  color: white;
}

.names.active {
  color: white;
  font-weight: bold;
  font-size: 38rpx;
}

.currtline {
  margin: -6rpx auto 0 auto;
  width: 65rpx;
  height: 6rpx;
  border-radius: 4rpx;
}

.currtline.active {
  background: white;
  transition: all .3s;
}
.tab_title{
  margin: 20rpx;
  border: 1px solid #db7c22;
  padding: 20rpx;
  box-sizing: border-box;
}
.head {
  background: #F13B7F;

}      

此處省略樣式部分代碼塊......可以看源碼！

三、結果