就直接贴代码啦~
wxml
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="{{wxSearchData}}" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" / view class="weui-icon-clear" wx:if="{{wxSearchData.value.length 0}}" bindtap="wxSearchClear" icon type="clear" size="14"/icon /view /view /view view class="weui-search-bar__cancel-btn" bindtap="back" text data-key='back'返回/text /view/viewjs
/** * 页面的初始数据 */ data: { lists: [], // 接收搜索的内容 wxSearchData: '', // 输入的值 },/** * 搜索 */ wxSearchInput: function (value) { var that = this; if (value.detail.value.length 0) { wx.request({ url: '', data: { value: value.detail.value }, header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'POST', dataType: json, responseType: text, success: function (res) { if (res.code) { var data = that.data.lists; for (let i = 0; i res.data.length; i++) { data.push(res.data[i]); } that.setData({ wxSearchData: value.detail.value, lists: data }) } }, fail: function (res) { }, complete: function (res) { }, }) } }, /** * 监听软键盘确认键 */ wxSearchConfirm: function (e) { }, /** * 返回 */ back: function (e) { wx:wx.navigateBack({ delta: 1, }) }
