范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发搜索功能实现教程

07-09 亚博APP
摘要:不管开辟甚么小法式,对搜刮都是会有一些需要的。本文将介绍微信小法式开辟中搜刮功能的实现步调。

不管开辟甚么小法式,假如信息量到达必然数额时,对具体一条或一类的信息查找需求就会变得愈来愈难。是以会对搜刮进行必然的需求,例如精准或恍惚搜刮功能。本文将介绍微信小法式开辟中搜刮功能的实现步调,和搜刮页面的一些复用。

对搜刮都是会有一些需要的,所以搜刮页面仍是可以复用的。由于只是写个搜刮页面,所以主页面就没有好好切,见谅。。。主页面就是下面如许:

/

这个页面在pages/components/component2/component2.wxml

点击页面中 黄色的input便可以跳转到真实的搜刮页面:pages/components/component2/search/search.wxml

搜刮页面中也是有个input搜刮框,旁边有个小叉号,可以断根input里的文字。

/

下面首要讲下search页面的逻辑:其实也很是简单。

搜刮input绑定bindInput函数,

bindInput:function(e){

this.setData({ inputValue:e.detail.value }) console.log(\'bindInput\'+this.data.inputValue) },

将输入的值存在inputValue中,搜刮button 用bindtap绑定setSearchStorage函数

setSearchStorage:function(){ let data; let localStorageValue = []; if(this.data.inputValue != \'\'){ //挪用API从当地缓存中获得数据 var searchData = wx.getStorageSync(\'searchData\') || [] searchData.push(this.data.inputValue) wx.setStorageSync(\'searchDa亚博ta\', searchData) wx.navigateTo({ url: \'../result/result\' }) }else{ console.log(\'空白的你搜个蛋!\') } // this.onLoad(); },

这个函数首要就是先判定输入的值是不是不为空,再经由过程getStorageSync获得到key为searchData的localStorage,

假如第一次还没有set过这个key就获得[],再将用户inputValue存的想要搜刮的值放进searchData,以后再跳转到result页面。这里我只放了个案例页面。

假如在真实的出产情况中,这个函数可以经由过程wx.request向办事器发送要求,再把数据放进result页面中,实现真实的搜刮功能。

/

删除inputValue的button功能实现也很简单,setData将inputValue设置为空字符串便可以了。

放点击result页面左上角的返回时,你便可以发现,你适才搜刮的成果已放到了search的页面中。

当你想要删除缓存数据的时辰,可以点击清空阅读记实按钮,会弹出个对话框:

/

点击确认删除以后,会主动刷新页面(重定向到本页面),将之前的key为searchData的localStorage重置为空数组。

modalChangeConfirm:function(){

wx.setStorageSync(\'searchData\',[])

this.setData({

modalHidden:true

})

wx.redirectTo({

url: \'../search/search\'

})

},

这里的断根不是利用wx.clearStorage()删除的,觉得clearStorage会将所有的localStorage都删失落,慎用!如许,搜刮的功能就做好了!

保举浏览:微信小法式开辟数组操作教程微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数