首先来看一看效果
再来瞅瞅代码，直接贴了，有问题可以留言
.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;
}