100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序实现搜索功能

微信小程序实现搜索功能

时间:2019-02-01 11:10:23

相关推荐

微信小程序实现搜索功能

首先呢在wxml中创建input标签

<input placeholder="请输入搜索关键词" value="{{val}}"bindinput="search"></input>

value绑定文本框的值,我这里使用的是bindInput事件,也就是只要是输入就会触发这个事件,这里呢不推荐用这种方法去写,因为你每次输入一个字母都会去请求一次后台,这样会给后台造成压力,使用bindconfirm这个方法,在点击回车时,也就是手机电脑上的回车会触发这个事件

wx.js

search(e){let name=e.detail.value;//通过e.detail.value接收输入的内容//console.log(e.detail.value)this.setData({//每次进去把之前的数据清空list:[],val:name //把输入的内容放进data里面})if(this.data.val==''){this.getdata() //当输入框等于空时,重新调用封装的请求数据的方法}wx.request({url: 'https://***********/shop/goods/list',success:((res)=>{//console.log(res.data.data)res.data.data.filter((item)=>{if(item.name.indexOf(this.data.val)>=0)//判断是否包含{console.log(item)this.data.list.push(item)}})//从新赋值this.setData({list:this.data.list,})})})},

这里需要注意的是当判断val是否为空时,不能直接 return false 而是重新调用之前请求所有数据的接口,如果return false 则文本框内容会变成false

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。