现附上小程序官网链接在搜索框中输入(点击即可查看哟)你会发现很长很长的说明,对于很多初学者来说根本无从下手,咳咳,其实我也是小白,只是最近在负责一些小项目,也踩了一些坑,在这里和大家分享一下,哈哈哈哈哈.
上图
search.wxss/搜索框样式/.search{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:70%;height:60rpx;background-color:whitesmoke;margin-top:5%;border:1rpxsolidwhitesmoke;border-radius:5rpx;}/搜索框提示文字样式/.searchinput{font-size:27rpx;font-family:'SegoeUI',Tahoma,Geneva,Verdana,sans-serif;padding-left:30rpx;}/搜索框小图标/.searchimage{width:40rpx;height:40rpx;padding-right:20rpx;}最后建一个
search.jspage({/页面的初始数据/data:{inputValue:'',//搜索的内容},//搜索框文本内容显示inputBind:function(event){this.setData({inputValue:event.detail.value})console.log('bindInput'+this.data.inputValue)},/搜索执行按钮/query:function(event){varthat=this/提问帖子搜索APIkeywordstring搜索关键词;这里是this.data.inputValuestartint分页起始值;这里是0/wx.request({url:'https://localhost/proj_online_class/server/public/index.php/forum/forum/get_issue_search/'+this.data.inputValue+/0/,data:{inputValue:this.data.inputValue},method:'GET',success:function(res){console.log(res.data)varsearchData=res.datathat.setData({searchData})/把从get_issue_searchAPI获取提问帖子搜索的数据设置缓存/wx.setStorage({key:'searchLists',data:{searchLists:res.data}})/设置模糊搜索/if(!that.data.inputValue){//没有搜索词友情提示wx.showToast({title:'请重新输入',image:'../../picture/tear.png',duration:2000,})}elseif(searchData.search.length==0){//搜索词不存在友情提示wx.showToast({title:'关键词不存在',image:'../../picture/tear.png',duration:2000,})}else{//提取题目关键字与搜索词进行匹配varsearchIndex=searchData.search.lengthvard=0;for(vari=0;i=searchIndex-1;i++){varsearchTitle=searchData.search[d].titleconsole.log(searchTitle)d=d+1;for(varx=0;x=searchTitle.length;x++){for(vary=0;y=searchTitle.length;y++){varkeyWord=searchTitle.substring(x,y);console.log(keyWord)}}/根据关键词跳转到search搜索页面/wx.navigateTo({url:'../search/search',})}}}})}})













