微信小程序的开发之搜索功能

就直接贴代码啦~
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> </view> js /** * 页面的初始数据 */ 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, }) }

• « 上一篇：Scrapy基于scrapy_redis实现分布式爬虫部署
• » 下一篇：win7开启wifi共享（热点）