欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-13 16:38:56
本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下 搜索页面: search.wxml页面:

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

搜索页面:

search.wxml页面:

<view class="form">
  <input class="searchinput" value='{{keyword}}' bindconfirm='gosearch' placeholder="请输入搜索关键字" type="text" />
</view>

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页面:

<view class="container">
 <view class="listbox" wx:for="{{searchshow}}" wx:key="{{item.id}}">
 <view class="listmain">
  <navigator url='../videoshow/videoshow?id={{item.id}}'>
  <image src="{{item.image}}" mode="widthfix"></image>
  <view class='listtitle'>
   <view class="listsubtitle">
   <text>{{item.title}}</text>
   </view>
   <view class="listtext">
   <text>{{item.decription}}</text>
   </view>
  </view>
  </navigator>
 </view>
 </view>
</view>
searchshow.js

 onload: function(options) {
 let searchshow = json.parse(options.data);
 let that = this
 that.setdata({
  searchshow: searchshow
 })
 console.log(searchshow)
 },

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