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


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 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序进入广告实现代码实例
Sep 19 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
用户的详细注册和判断
2006/10/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP 无限级分类
2017/05/04 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
django如何自己创建一个中间件
2019/07/24 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
学校万圣节活动方案
2014/02/13 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
运动会新闻稿
2015/07/17 职场文书
素质教育培训心得体会
2016/01/19 职场文书