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


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中的eval()函数详解
Aug 22 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
纯JS实现简单的日历
Jun 26 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP多态代码实例
2015/06/26 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python中获取对象信息的方法
2015/04/27 Python
Python实现把数字转换成中文
2015/06/29 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python 文件转成16进制数组的实例
2018/07/09 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
建筑学推荐信
2013/11/03 职场文书
岗位职责定义及内容
2013/11/08 职场文书
销售员岗位职责范本
2014/02/03 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书