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


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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
session 的生命周期是多长
2006/10/09 PHP
建立动态的WML站点(三)
2006/10/09 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
js实现图片360度旋转
2017/01/22 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python常用特殊方法实例总结
2019/03/22 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python tqdm库的使用
2020/11/30 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
酒店执行总经理岗位职责
2013/12/15 职场文书
高中化学教学反思
2014/01/13 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
星级党支部申报材料
2014/05/31 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
原告离婚代理词
2015/05/23 职场文书
2015年高中班级工作总结
2015/07/21 职场文书