微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面
更新時間：2022年07月18日 15:01:28 作者：ZhangXD_BLOG
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)搜索功能，并跳轉(zhuǎn)搜索結(jié)果頁面，供大家參考，具體內(nèi)容如下
搜索頁面：
search.wxml頁面：
<view class="form">
<input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="請輸入搜索關(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)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序提取公用函數(shù)到util.js及使用方法示例
這篇文章主要介紹了微信小程序提取公用函數(shù)到util.js及使用方法,結(jié)合實例形式分析了util.js公用函數(shù)相關(guān)調(diào)用操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了基于JavaScript的簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了JS模擬瀏覽器實現(xiàn)全局搜索功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了什么是JavaScript的防抖與節(jié)流,防抖是在頻繁觸發(fā)某一個事件時，一段時間內(nèi)不再觸發(fā)該事件后才會去調(diào)用對應(yīng)的回調(diào)函數(shù)，在設(shè)定間隔時間內(nèi)如果下一次事件被觸發(fā)， 那么就重新開始定時器，直到事件觸發(fā)結(jié)束，節(jié)流看下面文章的具體介紹吧2021-12-12
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了element-ui?動態(tài)換膚,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
JS實現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能示例
這篇文章主要介紹了JS實現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能,結(jié)合實例形式分析了JavaScript基于事件響應(yīng)、元素遍歷實現(xiàn)頁面tab切換功能相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了javascript事件綁定使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
上一篇ImageZoom已經(jīng)對圖片放大效果做了詳細的分析，這次在ImageZoom的基礎(chǔ)上進行擴展，實現(xiàn)更多的效果。2010-04-04
JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2023-05-05