微信小程序实现搜索功能并跳转搜索结果页面
程序员文章站
2022-10-13 16:38:56
本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下
搜索页面:
search.wxml页面:
本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下
搜索页面:
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) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 茼蒿怎么榨汁,你知道吗?
下一篇: 中式海鲜火锅怎么做?很简单让你尝到美味!