Search Page:search.wxml page: <view class="form"> <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="Please enter the search keyword" type="text" /> </view> search.wxss style: .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: // SearchgoSearch: 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=='No related video'){ wx.showToast({ title: 'No related videos', 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: 'Input cannot be empty', icon: 'none', duration: 1500 }) } } Search results:searchShow.wxml page: <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) }, This is the end of this article about how to implement the search function and jump to the search results page in WeChat mini-programs. For more related mini-programs to implement search and jump content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: CSS optimization skills self-practice experience
>>: Why is the disk space still occupied after deleting table data in MySQL?
1. Data desensitization explanation In daily deve...
Give time time and let the past go. In the previo...
Dark background style page design is very popular...
1. Problem Description Today I need to check the ...
Recently, I encountered a problem in the process ...
Knowing the IP address of a device is important w...
Table of contents Overview What is Image Compress...
Table of contents 1. DateTimePicker date selectio...
Related reading: MySQL8.0.20 installation tutoria...
This article example shares the specific code of ...
download http://nginx.org/en/download.html Unzip ...
Table of contents 1. Download JDK (take jdk1.8.0 ...
Preface Recently, when I was building a project, ...
Preface WeChat Mini Programs provide new open cap...
Execute the following command to report an error ...