耀极客论坛

 找回密码
 立即注册
查看: 748|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 01:40:37 | 显示全部楼层 |阅读模式
  本文主要介绍了微信小程序实现搜索功能并跳转搜索结果页面,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
搜索页面:
  search.wxml页面:
  1.     ‹view class="form">
  2.       ‹input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" />
  3.     ‹/view>
复制代码
  search.wxss样式:
  1. .form {
  2.   position: relative;
  3.   height: 40px;
  4. }
  5. .searchInput {
  6.   border: 1px solid #2c3036;
  7.   height: 40px;
  8.   line-height: 40px;
  9.   font-size: 14px;
  10.   border-radius: 20px;
  11.   color: #bebec4;
  12.   padding-left: 35px;
  13. }
复制代码
  search.js:
  1.   // 搜索
  2.   goSearch: function(e) {
  3.     var that = this;
  4.     var formData = e.detail.value;
  5.     if (formData) {
  6.       wx.request({
  7.         url: 'https://xxxxx/homepage/search',
  8.         data: {
  9.           title: formData
  10.         },
  11.         header: {
  12.           'Content-Type': 'application/json'
  13.         },
  14.         success: function(res) {
  15.           that.setData({
  16.             search: res.data,
  17.           })
  18.           if (res.data.msg=='无相关视频'){
  19.             wx.showToast({
  20.               title: '无相关视频',
  21.               icon: 'none',
  22.               duration: 1500
  23.             })
  24.           }else{
  25.             let str = JSON.stringify(res.data.result.data);
  26.             wx.navigateTo({
  27.               url: '../searchShow/searchShow?data=' + str
  28.             })
  29.           }
  30.          
  31.           // console.log(res.data.msg)
  32.         }
  33.       })
  34.     } else {
  35.       wx.showToast({
  36.         title: '输入不能为空',
  37.         icon: 'none',
  38.         duration: 1500
  39.       })
  40.     }
  41.   }
复制代码
搜索结果:
  searchShow.wxml页面:
  1. ‹view class="container">
  2.   ‹view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
  3.     ‹view class="listMain">
  4.       ‹navigator url='../videoShow/videoShow?id={{item.id}}'>
  5.         ‹image src="{{item.image}}" mode="widthFix">‹/image>
  6.         ‹view class='listTitle'>
  7.           ‹view class="listSubtitle">
  8.             ‹text>{{item.title}}‹/text>
  9.           ‹/view>
  10.           ‹view class="listText">
  11.             ‹text>{{item.decription}}‹/text>
  12.           ‹/view>
  13.         ‹/view>
  14.       ‹/navigator>
  15.     ‹/view>
  16.   ‹/view>
  17. ‹/view>
复制代码
  searchShow.js
  1.   onLoad: function(options) {
  2.     let searchShow = JSON.parse(options.data);
  3.     let that = this
  4.     that.setData({
  5.       searchShow: searchShow
  6.     })
  7.     console.log(searchShow)
  8.   },
复制代码
  到此这篇关于微信小程序实现搜索功能并跳转搜索结果页面的文章就介绍到这了,更多相关小程序实现搜索并跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:02 , Processed in 0.072882 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表