您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序如何實(shí)現(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁(yè)面,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
微信小程序?qū)崿F(xiàn)搜索功能,并跳轉(zhuǎn)搜索結(jié)果頁(yè)面,具體內(nèi)容如下
搜索頁(yè)面:
search.wxml頁(yè)面:
<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=='無(wú)相關(guān)視頻'){ wx.showToast({ title: '無(wú)相關(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頁(yè)面:
<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) },
以上是“微信小程序如何實(shí)現(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁(yè)面”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。