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?
Table of contents 1. Basic SELECT statement 1. Qu...
Table of contents 1. Custom instructions 1. Regis...
CSS style rule syntax style is the basic unit of ...
Table of contents 1. Problem Description 2. Probl...
The plugin is installed in the Firefox browser. T...
List of HTML tags mark type Name or meaning effec...
Through JavaScript, we can prevent hyperlinks fro...
Table of contents Small but beautiful Keep it sim...
Table of contents 1. Create a table 1.1. Basic sy...
MySQL database too many connections This error ob...
Step 1: Sign a third-party trusted SSL certificat...
Example Usage Copy code The code is as follows: &l...
Apache Arrow is a popular format used by various ...
An optimization solution when a single MYSQL serv...
On the road to self-learning game development, th...