在页面search.wxml
中,定义一个input
输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()
和handleSearch()
的事件,同时在它们的下面定义搜索的列表,代码如下所示:
< view class = " search-header" >
< input class = " search-input" bindtap = " handleInputChange" />
< view class = " search-btn" bindtap = " handleSearch" > 搜索</ view>
</ view>
< view>
< view wx: for= " {{list}}" wx: key= " {{index}}" class = " item" id = " {{item.id}}" bindtap = " handleItemTap" >
< view> {{ item }}</ view>
< view class = " item-message" > {{ item.message }}</ view>
</ view>
</ view>
在逻辑文件search.js
中,在data
中存放list
的数据,为空数组,存放搜索列表的数据,同时定义staticData
,在里面定义inputValue
,里面为空字符串,是input
输入框的值,代码如下所示:
data: {
list: [ ]
} ,
staticData: {
inputValue: ""
}
在search.js
的onLoad()
生命周期函数中,调用请求数据的函数getSearchResult()
,这样在一进入页面的时候就会获取到所有的数据,不过由于并没有关键字keyword
,需要传空字符串,代码如下所示:
onLoad ( ) {
this . getSearchResult ( "" ) ;
} ,
getSearchResult ( keyword) {
wx. request ( {
url: 'xxxxxx' ,
data: {
keyword: this . staticData. inputValue
} ,
method: "POST" ,
header: {
'content-type' : 'application/x-www-form-urlencoded'
} ,
success: this . getSearchResultSucc. bind ( this )
} )
} ,
在search.js
中,定义一个响应成功后的函数getSearchResultSucc()
,判断响应的数据是否存在。如果存在通过this.setData()
方法将响应后的数据赋值给list
,如果不存在,list
仍然为空数组,代码如下所示:
getSearchResultSucc ( res) {
if ( res. data. ret) {
const result = res. data. data;
this . setData ( {
list: result
} )
} else {
this . setData ( {
list: [ ]
} )
}
}
在search.js
中,定义handleInputChange()
函数,这个函数也是input
输入框绑定的函数,传入事件对象e
,然后通过e.detail.value
赋值给staticData
的inputValue
,代码如下所示:
handleInputChange ( e) {
this . staticData. inputValue = e. detail. value;
}
在search.js
中,定义handleSearch()
函数,这个函数也是之前搜索按钮所绑定的函数,在这个里面重新发起一次请求,携带keyword
关键字发起请求,代码如下所示:
handleSearch ( keyword) {
this . getSearchResult ( keyword)
}
如果想要点击在搜索以后显示的列表,可以在列表中绑定handleItemTap()
事件,传入事件对象e
,通过 e.currentTaret.id
去获取到点击的id
,然后再通过 wx.navigateTo()
方法跳转到相应的详情页,代码如下所示:
handleItemTap ( e) {
wx. navigateTo ( {
url: '/pages/detail/detail?id=' + e. currentTaret. id
} )
}