微信小程序實現(xiàn)搜索功能并跳轉搜索結果頁面
更新時間：2022年07月18日 15:01:28 作者：ZhangXD_BLOG
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)搜索功能并跳轉搜索結果頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)搜索功能，并跳轉搜索結果頁面，供大家參考，具體內(nèi)容如下
搜索頁面：
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)
?},以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)多張圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
uniapp使用u-upload組件來實現(xiàn)圖片上傳功能
最近在用uniapp開發(fā)微信小程序,下面這篇文章主要給大家介紹了關于uniapp使用u-upload組件來實現(xiàn)圖片上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
使用JavaScript下載圖片并保存到本地的詳細解釋和代碼示例
在前端開發(fā)中經(jīng)常會遇到需要將圖片從網(wǎng)絡上下載并保存到本地的需求,這篇文章主要給大家介紹了關于使用JavaScript下載圖片并保存到本地的詳細解釋和代碼示例,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了JS小技巧之通過字符串追加元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
JsBarcode是一個用JavaScript編寫的條形碼生成器,它支持多種條形碼格式,可在瀏覽器和Node.js中使用,下面這篇文章主要給大家介紹了關于JS使用jsBarcode生成條形碼(一維碼)的相關資料,需要的朋友可以參考下2023-03-03
本篇文章通過代碼示例給大家詳細分析了javascript基礎內(nèi)容模塊加載器的相關知識點，一起學習下。2018-03-03
javascript實現(xiàn)Table間隔色以及選擇高亮(和動態(tài)切換數(shù)據(jù))的方法
這篇文章主要介紹了javascript實現(xiàn)Table間隔色以及選擇高亮(和動態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實現(xiàn)表格切換的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)打字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了基于JS實現(xiàn)table導出Excel并保留樣式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結合實例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關操作技巧,需要的朋友可以參考下2016-10-10