当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现搜索功能并跳转搜索结果页面

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

2019年07月20日  | 移动技术网IT编程  | 我要评论

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

搜索页面：

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)
 },

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网