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

admin

　　本文主要介绍了微信小程序实现搜索功能并跳转搜索结果页面，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
搜索页面：
　　search.wxml页面：

2.     ‹view class="form">
3.       ‹input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" />
4.     ‹/view>

复制代码

　　search.wxss样式：

2. .form {
3.   position: relative;
4.   height: 40px;
5. }
7. .searchInput {
8.   border: 1px solid #2c3036;
9.   height: 40px;
10.   line-height: 40px;
11.   font-size: 14px;
12.   border-radius: 20px;
13.   color: #bebec4;
14.   padding-left: 35px;
15. }

复制代码

　　search.js:

2.   // 搜索
3.   goSearch: function(e) {
4.     var that = this;
5.     var formData = e.detail.value;
6.     if (formData) {
8.       wx.request({
10.         url: 'https://xxxxx/homepage/search',
11.         data: {
12.           title: formData
13.         },
15.         header: {
16.           'Content-Type': 'application/json'
17.         },
18.         success: function(res) {
19.           that.setData({
20.             search: res.data,
21.           })
22.           if (res.data.msg=='无相关视频'){
23.             wx.showToast({
24.               title: '无相关视频',
25.               icon: 'none',
26.               duration: 1500
27.             })
28.           }else{
29.             let str = JSON.stringify(res.data.result.data);
30.             wx.navigateTo({
31.               url: '../searchShow/searchShow?data=' + str
32.             })
33.           }
34.          
35.           // console.log(res.data.msg)
36.         }
37.       })
38.     } else {
40.       wx.showToast({
41.         title: '输入不能为空',
42.         icon: 'none',
43.         duration: 1500
44.       })
46.     }
47.   }

复制代码

搜索结果：
　　searchShow.wxml页面：

2. ‹view class="container">
3.   ‹view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
4.     ‹view class="listMain">
5.       ‹navigator url='../videoShow/videoShow?id={{item.id}}'>
6.         ‹image src="{{item.image}}" mode="widthFix">‹/image>
7.         ‹view class='listTitle'>
8.           ‹view class="listSubtitle">
9.             ‹text>{{item.title}}‹/text>
10.           ‹/view>
11.           ‹view class="listText">
12.             ‹text>{{item.decription}}‹/text>
13.           ‹/view>
14.         ‹/view>
15.       ‹/navigator>
16.     ‹/view>
17.   ‹/view>
18. ‹/view>

复制代码

　　searchShow.js

2.   onLoad: function(options) {
3.     let searchShow = JSON.parse(options.data);
4.     let that = this
5.     that.setData({
6.       searchShow: searchShow
7.     })
8.     console.log(searchShow)
9.   },

复制代码

　　到此这篇关于微信小程序实现搜索功能并跳转搜索结果页面的文章就介绍到这了,更多相关小程序实现搜索并跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

---