微信小程序使用weui構建搜索欄（searchbar）+導航（navbar）

首先須要在lib目錄中添加weui.wxss。searchbar和navbar結合主要解決二者的層次問題，即搜索框輸入時，下方的檢索結果可以覆蓋住navbar。下面就開始發碼啦：

（1）wxml部分：

<view class="page">
    <view>
      <view class="page__bd">
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                        <icon type="clear" size="14"></icon>
                    </view>
                </view>
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消 </view>
        </view>
        <view class="weui-cells searchbar-result searchBarCss" wx:if="{{inputVal.length > 0}}">
          <!-- 搜索列表 -->
          <view class="weui-cell__bd" wx:for="{{list}}" wx:key="key">
            <navigator url="" class="weui-cell" hover-class="weui-cell_active" data-id='{{item.id}}' data-name='{{item.name}}' bindtap='btn_name'>
                <view class="weui-cell__bd">
                    <view>{{item.name}}</view>
                </view>
            </navigator>
          </view>
        </view> 
    </view>
    </view>
    <view class="page__bd">
        <view class="weui-tab">
            <view class="weui-navbar contentCss">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                 
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">選項二的內容</view>
            </view>
        </view>
    </view>
</view>

（2）js部分：（注意：註釋部分主要是傳遞到後臺作的相應的檢索篩選結果，返回值是已經檢索完成後的結果集合JsonArray格式）

var sliderWidth = 96; // 須要設置slider的寬度，用於計算中間位置
var app = getApp(); Page({ data: { tabs: ["能效看板", "設備看板"], activeIndex: 0, sliderOffset: 0, sliderLeft: 0, // 搜索框狀態
    inputShowed: true, //顯示結果view的狀態
    viewShowed: false, // 搜索框值
    inputVal: "", //搜索渲染推薦數據
 list: [], }, onLoad: function () { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2, sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex }); } }); }, tabClick: function (e) { this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: e.currentTarget.id }); }, showInput: function () { this.setData({ inputShowed: true }); }, // 隱藏搜索框樣式
  hideInput: function () { this.setData({ inputVal: "", inputShowed: false }); }, // 清除搜索框值
  clearInput: function () { this.setData({ inputVal: "" }); }, // 鍵盤擡起事件
  inputTyping: function (e) { console.log(e.detail.value) var that = this; if (e.detail.value == '') { return; } that.setData({ viewShowed: false, inputVal: e.detail.value }); /*wx.request({ url: "*****", data: { "openid": "*****", "name": e.detail.value }, method: 'GET', header: { 'Content-type': 'application/json' }, success: function (res) { that.setData({ list: res.data }) } });*/
//隨便寫幾個單詞做爲檢索後的結果集 that.setData({ list: [{ "deviceId": "001", "name": "abcaaaaaaaa" }, { "deviceId": "002", "name": "bcdaaaaaaaaa" }, { "deviceId": "003", "name": "cde" }, { "deviceId": "004", "name": "def" }, { "deviceId": "005", "name": "efg" }] }) }, // 獲取選中推薦列表中的值
  btn_name: function (res) {
    var that = this; that.hideInput(); console.log('name:  ' + res.currentTarget.dataset.name); }, });

（3）wxss部分：

@import '../../lib/weui.wxss'; page, .page, .page__bd{ height: 100%; background-color: white;
} .page__bd{ padding-bottom: 0;
} .weui-tab__content{ padding-top: 60px; text-align: center;
} .searchbar-result{ margin-top: 0; font-size: 14px;
} .searchbar-result:before{ display: none;
} .weui-cell{ padding: 12px 15px 12px 35px;
} .searchBarCss{ position: fixed; width: 100%; background-color: white;z-index: 10;
} .contentCss{ width:100%; position:fixed;margin-top:100rpx;z-index:1;
}