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


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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue-cli的eslint相关用法
2017/09/29 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
js实现简单页面全屏
2019/09/17 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
12岁生日感言
2014/01/21 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
生活小常识广播稿
2015/08/19 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android