本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)搜索功能，并跳轉(zhuǎn)搜索結(jié)果頁(yè)面，供大家參考，具體內(nèi)容如下

搜索頁(yè)面：

search.wxml頁(yè)面：

<view class="form">  <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="請(qǐng)輸入搜索關(guān)鍵字" 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=='無相關(guān)視頻'){   wx.showToast({    title: '無相關(guān)視頻',    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  })  } }

搜索結(jié)果：

searchShow.wxml頁(yè)面：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。