微客导航 » 文章资讯 » 微信小程序实现搜索功能并跳转搜索结果页面

微信小程序实现搜索功能并跳转搜索结果页面

2023-08-23 08:40:05 338

本文实例为大家分享了微信小程序实现搜索功能，并跳转搜索结果页面，供大家参考，具体内容如下

搜索页面：

search.wxml页面：

search.wxss样式：

.form{
position:relative;
height:40px;
}

.searchInput{
border:1pxsolid#2c3036;
height:40px;
line-height:40px;
font-size:14px;
border-radius:20px;
color:#bebec4;
padding-left:35px;
}

search.js:

//搜索
goSearch:function(e){
varthat=this;
varformData=e.detail.value;
if(formData){

wx.request({

url:'https://xxxxx/homepage/search',
data:{
title:formData
},

header:{
'Content-Type':'application/json'
},
success:function(res){
that.setData({
search:res.data,
})
if(res.data.msg=='无相关视频'){
wx.showToast({
title:'无相关视频',
icon:'none',
duration:1500
})
}else{
letstr=JSON.stringify(res.data.result.data);
wx.navigateTo({
url:'../searchShow/searchShow?data='+str
})
}

//console.log(res.data.msg)
}
})
}else{

wx.showToast({
title:'输入不能为空',
icon:'none',
duration:1500
})

}
}

搜索结果：

searchShow.wxml页面：








{{item.title}}


{{item.decription}}






searchShow.js

onLoad:function(options){
letsearchShow=JSON.parse(options.data);
letthat=this
that.setData({
searchShow:searchShow
})
console.log(searchShow)
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现搜索功能并跳转搜索结果页面

热门推荐

随机推荐