微信小程序-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
         });
     }
 });