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