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