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


Posted in Javascript onMay 18, 2019

本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下

搜索页面:

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)
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
详解js中let与var声明变量的区别
Apr 05 #Javascript
webpack中如何加载静态文件的方法步骤
May 18 #Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 #Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 #Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
推荐文章系统(一)
2006/10/09 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Djang中静态文件配置方法
2015/07/30 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Django模板Templates使用方法详解
2019/07/19 Python
python中class的定义及使用教程
2019/09/18 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
django配置app中的静态文件步骤
2020/03/27 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
毕业自我鉴定总结
2014/03/24 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
计划生育标语
2014/06/23 职场文书
党员评议思想汇报
2014/10/08 职场文书
先进党支部申报材料
2014/12/24 职场文书
收银员岗位职责
2015/02/03 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
培养联系人考察意见
2015/06/01 职场文书
工商局调档介绍信
2015/10/22 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
中学音乐课教学反思
2016/02/18 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫