微信小程序-weui实例代码提取

搜索框

对应代码如下：

wxss文件

<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>

 js文件

Page({
    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
        });
    }
});