小程序学习

小模板

搜索框的实现

js文件.

// search   
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      
      });  
},  

wxml文件.

<!-- search bar -->
    <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>
        </view>
    </view>

wxss文件.

@import "../common/index.wxss";
@import "../common/lib/weui.wxss";//引用的组件库
 /* search bar */
.searchbar-result{
    margin-top: 0;
    font-size: 14px;
}
.searchbar-result:before{
    display: none;
}
.weui-cell{
    padding: 12px 15px 12px 35px;
}
.weui-icon-search {
  /* modify add float:left; margin-top: 2px; margin-left:8px;*/
  float: left;
  margin-top: 2px;
  margin-left: 8px;
}

GitHub地址：https://github.com/Tencent/weui-wxss