微信小程序weui在线入门教程-WeUi搜索相关-searchbar搜索栏

  data: {

    inputShowed: false,

    inputVal: ""

  },

  showInput: function () {

    this.setData({

      inputShowed: true

    });

  },

  hideInput: function () {

    this.setData({

      inputVal: "",

      inputShowed: false

    });

  },

  clearInput: function () {

    this.setData({

      inputVal: ""

    });

  },

  inputTyping: function (e) {

    this.setData({

      inputVal: e.detail.value

    });

  },

<view class="page">

  <view class="page__hd">

    <view class="page__title">SearchBar</view>

    <view class="page__desc">搜索栏</view>

  </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" wx:if="{{inputVal.length > 0}}">

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

        <view class="weui-cell__bd">

          <view>实时搜索文本</view>

        </view>

      </navigator>

    </view>

  </view>

</view>