微信小程序---搜索功能并跳转搜索结果页面

搜索页面：

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 = thisthat.setData({searchShow: searchShow})console.log(searchShow)},

微信小程序---搜索功能并跳转搜索结果页面相关推荐

微信小程序点击商品跳转商品详情页面的方法
最近在学习微信小程序电商类开发的时候遇到了一个问题.自己写好的json AIP 接口想通过点击相同的图片跳转到商品详情页面无法实现,几经周折后想到了 navigator 通过页面传参取json数据 ...
微信小程序左上角返回按钮跳转到指定页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在当前页面的 onUnload 执行页面跳转 onUnload: function () {wx.reLaun ...
微信小程序-学生登录后跳转-显示教师页面信息
1.页面跳转. //页面跳转wx.redirectTo({url: '../teachers/teachers' //跳转到教师页面}) 2.显示老师页面信息 wxml中 <view class ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
好玩的表情包机器人微信小程序源码下载支持直接搜索仿聊天界面获取支持流量主
这是一款和表情包有关的一款机器人小程序界面就相当于是聊天界面,然后是你和AI的界面打开小程序后会自动全网推送几个表情包给你然后你可以点击下方的说你还要然后又会随机发给你当然你也可以输入关键词然 ...
html微信支付功能代码,微信小程序支付功能（前端）的实现
微信小程序支付功能(前端)的实现 var app = getApp(); Page({ data: {},onLoad: function (options) { // 页面初始化 options为 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...

微信小程序---搜索功能并跳转搜索结果页面

微信小程序---搜索功能并跳转搜索结果页面相关推荐

最新文章

热门文章