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


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中的new的使用方法与注意事项
May 16 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 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
一个很不错的PHP翻页类
2009/06/01 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JSON 数据格式详解
2017/09/13 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
《问银河》教学反思
2014/02/19 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年消防工作总结
2014/11/21 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
优秀党员个人总结
2015/02/14 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书