微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面
搜索頁面:
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 }) } }
搜索結(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) },
到此這篇關于微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面的文章就介紹到這了,更多相關小程序?qū)崿F(xiàn)搜索并跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!?
相關文章
document.getElementById的一些細節(jié)
document.getElementById的一些細節(jié)...2006-09-09JavaScript實現(xiàn)ASC轉(zhuǎn)漢字及漢字轉(zhuǎn)ASC的方法
這篇文章主要介紹了JavaScript實現(xiàn)ASC轉(zhuǎn)漢字及漢字轉(zhuǎn)ASC的方法,涉及JavaScript編碼轉(zhuǎn)換的相關技巧,需要的朋友可以參考下2016-01-01bootstrap-table獲取表格數(shù)據(jù)的多種方式
這篇文章主要介紹了bootstrap-table獲取表格數(shù)據(jù)的多種方式,bootstrap-table獲取值得兩種方式,一種是通過data獲取,一種是通過url獲取,需要的朋友可以參考下2023-10-10淺談js對象屬性 通過點(.) 和方括號([]) 的不同之處
下面小編就為大家?guī)硪黄獪\談js對象屬性 通過點(.) 和方括號([]) 的不同之處。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10JS中showModalDialog關閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關閉子窗口刷新主窗口用法,結(jié)合具體實例形式較為詳細的分析了showModalDialog常見用法與相關使用技巧,需要的朋友可以參考下2017-03-03