搜索框的完美实现--微信小程序

转载请注明作者和出处

作者：刘冰华
2016-12-7

首先来看一看效果

再来瞅瞅代码，直接贴了，有问题可以留言

.wxml

<view class="search__top">
  <form class="search__form" bindsubmit="searchSubmit">
    <input value="{{search.searchValue}}" placeholder="团队名字/团队ID" class="search__input" bindfocus="focusSearch" bindinput="searchActiveChangeinput" auto-focus="true" name="teamSearchKeyWords" />
    <view class="search__icon search__active" style="width:40rpx;">
      <icon type="search" size="13" color="#888" style="float:left;margin-right:20rpx;"></icon>
    </view>
    <button wx:if="{{search.showClearBtn}}" catchtap="searchActiveChangeclear" form-type="reset" style="background:none;position:absolute;border:none;right:0;top:0;bottom:0;width:80rpx;">
      <icon type="clear" size="19" color="#aaa" style="position:absolute;right:15rpx;top:10rpx;z-index:3;"></icon>
    </button>
  </form>
</view>



<view class="panel" wx:if="{{search.showClearBtn}}" catchtap="searchSubmit">
  <view class="panel__bd">
    <view class="media-box media-box_small-appmsg">
      <view class="cells">
        <view class="a cell cell_access">
          <view class="cell__hd" style="background-color:#1AAD19;border-radius:7rpx;width:80rpx;height:80rpx;line-height:80rpx;text-align:center;">
            <icon type="search" size="24" color="#fff" style="margin-top:20rpx;"></icon>
          </view>
          <view class="cell__bd cell_primary">
            <view class="p" style="padding-left:20rpx;font-size:34rpx;"><text style="color:#000;">搜索:</text><text style="color:#1AAD19;margin-left:20rpx;">{{search.searchValue}}</text></view>
          </view>
          <text class="cell__ft"></text>
        </view>
      </view>
    </view>
  </view>
</view>


<block wx:for="{{searchResult}}" wx:for-item="item" wx:key="id" >
<navigator url="info?teamId={{item.team_id}}">
  <view class="person__top__wrapper">
    <view class="person__top__avatar">
      <image src="{{item.team_avator}}" />
    </view>
    <view class="person__top__userinfo">
      <view class="h3 justify">{{item.team_name}}</view>
      <view class="h4 justify">{{item.team_intr}}</view>
    </view>
  </view>
</navigator>
</block>

.js

Page({
  data:{
    search:{
      searchValue : '',
      showClearBtn : false
      },
    searchResult : []
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  //输入内容时
  searchActiveChangeinput : function(e){
    const val = e.detail.value;

      this.setData({
         'search.showClearBtn' : val != '' ? true : false,
         'search.searchValue' : val
      })

  },
  //点击清除搜索内容
  searchActiveChangeclear : function(e){
      this.setData({
         'search.showClearBtn' : false,
         'search.searchValue' : ''
      })
  },
  //点击聚集时
  focusSearch : function(){
      if(this.data.search.searchValue){
          this.setData({
            'search.showClearBtn' : true
          })
      }
  },
  //搜索提交
  searchSubmit : function(){
    const val = this.data.search.searchValue;
    if(val){
      const that = this,
            app = getApp();
      wx.showToast({
        title : '搜索中',
        icon : 'loading'
      });   
      wx.request({
        url: app.globalData.API_URL + 'searchTeam',
        data: {
          keywords : val,
          user_id : app.globalData.myInfo.user_id
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        // header: {}, // 设置请求的 header
        success: function(res){
          // success
          let searchResult = res.data.data;
          const len = searchResult.length;
          for(let i = 0; i < len; i++){
              searchResult[i]['team_avator'] = app.globalData.STATIC_SOURCE + searchResult[i]['team_avator'];
          }
          that.setData({
            searchResult : searchResult,
            'search.showClearBtn' : false,
          })
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
          wx.hideToast();
        }
      })
    }
  }
})

.json

{
    "navigationBarTitleText": "搜索团队"
}

.wxss

page{
    background-color:#EFEFF4;
}
.person__top__wrapper{
    width:100%;
    box-sizing:border-box;
    padding-left:28rpx;
    padding-right:28rpx;
    padding-top:24rpx;
    padding-bottom:24rpx;
    border-top:1rpx solid #e5e5e5;
    border-bottom:1rpx solid #e5e5e5;
    height:178rpx;
    margin-top:30rpx;
    background-color:#fff;
    position: relative;
}
.person__top__avatar{
    border:1rpx solid #e5e5e5;
    width:130rpx;
    height:130rpx;
    overflow: hidden;
    box-sizing:content-box;
    float: left;
}
.person__top__avatar image{
    width:130rpx;
    height:130rpx;
    border-radius:7rpx;
}
.person__top__userinfo{
    right:0;
    overflow: hidden;
    position: absolute;
    left:182rpx;
    box-sizing:border-box;
    top:44rpx;
    color:#000;
    font-family:'微软雅黑';
    font-weight:500;    
    bottom:44rpx;
}
.person__top__userinfo .h2{
    width:300rpx;
    height:90rpx;
    line-height:90rpx;
    font-size:36rpx;  

}
.person__top__userinfo .h3{
    width:300rpx;
    height:60rpx;
    font-size:30rpx;  

}
.person__top__userinfo .h4{
    width:300rpx;
    height:30rpx;
    font-size:24rpx;    
}
.person__top__userinfo::after {
  content: " ";
  display: inline-block;
  height: 17rpx;
  width: 17rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #C6C6CB;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -10rpx;
  right: 30rpx;
}
.person__top__userinfo image{
  display: inline-block;
  height: 34rpx;
  width: 34rpx;
  top: 50%;
  margin-top: -17rpx;
  position: absolute;
  right: 58rpx;
}
button::after{
    border:none;
}
.person__top__wrapper{
    margin-top:0;
    border-top:none;
}