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

本文实例为大家分享了微信小程序实现搜索功能，并跳转搜索结果页面，供大家参考，具体内容如下

搜索页面：

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)
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序搜索组件wxSearch实例详解

    微信小程序搜索组件wxSearch实例详解

    wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

  • 微信小程序结合Storage实现搜索历史效果

    微信小程序结合Storage实现搜索历史效果

    本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下 实现目标 代码实现 集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单. <!-- wxml --> <view class="search-box"> <view class='icon'> <image src='../../assets/search.png' mode='width

  • 微信小程序实现搜索历史功能

    微信小程序实现搜索历史功能

    结合了微信给的资料,马马虎虎摸索出了一些东西,下面说下一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. <view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" style="color:#9E9E9E;border-bottom:0;fon

  • 微信小程序实现全局搜索代码高亮的示例

    需求 最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果. 代码 wxml: <view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:f

  • 微信小程序搜索功能(附：小程序前端+PHP后端)

    开发需求 微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收表单数据(js获取表单name=keyword的值) 3.通过wx.request向服务器后端发起请求查询数据库 4.返回JSON格式的数据给小程序,js解析渲染到小程序前端展示 界面 代码 index.wxml <!-- 标题 --> <view class="title&quo

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序城市选择及搜索功能的方法

    实现搜索城市功能 参考 微信小程序 之『仿美团城市选择 城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 sc

  • 微信小程序开发常用功能点与使用方法总结

    在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 1.获取高度宽度 var windowHeight = wx.getSystemInfoSync().windowHeight var windowWidth = wx.getSystemInfoSync().windowWidth 2.动态绑定 style 样式 和class class="operBtn {{select==1?'activeClass':''}}" style="displ

  • 微信小程序如何实现商品列表跳转商品详情页功能

    微信小程序如何实现商品列表跳转商品详情页功能

    目录 引言 1.1实现首页页面 2.1实现调跳转到手机详情页 总结 引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标 首页显示两行文字,多余的文字隐藏,以3个点代替 点击页面不同的地方,能够跳转到不同的手机详情页面 手机详情页包含手机图片,上架日期,价格,手机描述等图文信息** 1.1实现首页页面 效果如下图 代码如下:其中js页面代码包含了跳转 <!--index.wxml--> <view class="container"

  • 微信小程序自定义底部导航带跳转功能

    微信小程序自定义底部导航带跳转功能

    本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

  • 微信小程序 scroll-view 实现锚点跳转功能

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t

  • 微信小程序实现天气预报功能

    微信小程序实现天气预报功能

    本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字,点击跳

  • 微信小程序开发常用功能汇总

    微信小程序开发常用功能汇总

    目录 获取用户信息 获取手机号 添加分享功能 静态分享 带参分享 全局分享 分享按钮 页面跳转 自定义组件 定义全局组件 设置默认顶部导航栏样式 取消顶部默认的导航栏 获取用户信息 调用 wx.getUserProfile 方法获取用户基本信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo 具体参数如下: 属性 类型 默认值 必填 说明 lang string en 否 显示用户信息的语言 desc s

  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

  • Android中微信小程序支付倒计时功能

    Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序显示下拉列表功能【附源码下载】

    微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions.miniprogram/images.miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置. 此时编译下方控制台会报"VM8100:5 appJSON[&qu

随机推荐