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

这篇文章主要介绍了微信小程序实现搜索功能并跳转搜索结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

搜索页面：

search.wxml页面：

search.wxss样式：

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

search.js:

 // 搜索 goSearch: function(e) { var that = this; var formData = 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{ let str = 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) { let searchShow = JSON.parse(options.data); let that = this that.setData({ searchShow: searchShow }) console.log(searchShow) },