广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现搜索功能并跳转搜索结果页面
  • 160
分享到

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

2024-04-02 19:04:59 160人浏览 薄情痞子
摘要

搜索页面: search.wxml页面: <view class="fORM"> <input class="searchInput" va

搜索页面:

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

到此这篇关于微信小程序实现搜索功能并跳转搜索结果页面的文章就介绍到这了,更多相关小程序实现搜索并跳转内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网! 

--结束END--

本文标题: 微信小程序实现搜索功能并跳转搜索结果页面

本文链接: https://www.lsjlt.com/news/159747.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现搜索功能并跳转搜索结果页面
    搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" va...
    99+
    2022-11-12
  • 微信小程序实现搜索框功能
    本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下 效果: wxml文件: <view class="search_input" > ...
    99+
    2022-11-12
  • 微信小程序如何实现搜索功能
    这篇文章给大家分享的是有关微信小程序如何实现搜索功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件...
    99+
    2022-10-19
  • 微信小程序实现简单搜索功能
    本文实例为大家分享了微信小程序实现简单搜索功能的具体代码,供大家参考,具体内容如下 搜索效果图 实现功能如下 (1) 未找到商品时显示提示信息,找到商品时显示商品列表 (2) 清空...
    99+
    2022-11-13
  • 微信小程序云开发实现搜索功能
    微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询。废话...
    99+
    2022-11-13
  • 微信小程序云开发怎么实现搜索功能
    本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!简单搜索功能实现WXML代码段<view...
    99+
    2023-06-30
  • 微信小程序怎么实现页面跳转功能
    这篇“微信小程序怎么实现页面跳转功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现页面跳转功能”文章吧。实...
    99+
    2023-07-05
  • 使用微信小程序实现搜索框自动补全功能
    使用微信小程序实现搜索框自动补全功能 随着移动互联网的发展,微信小程序成为了人们生活中不可或缺的一部分。在小程序中,搜索功能是非常常见的需求之一。为了提升用户体验,搜索框的自动补全功能是一个很好的加分项。本文将介绍如何使用微信小程序实现搜索...
    99+
    2023-11-21
    搜索框 微信小程序 自动补全功能
  • 微信小程序如何实现城市选择及搜索功能
    这篇文章给大家分享的是有关微信小程序如何实现城市选择及搜索功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现搜索城市功能js文件// pages/address/a...
    99+
    2022-10-19
  • 微信小程序实现搜索商品和历史记录的功能
    本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。 不详细介绍,主看代码注释即可!! 1、搜索组件页面代码块 <template>   <vi...
    99+
    2022-11-13
  • 微信小程序如何实现页面跳转功能详解
    目录前言实现效果事件如何实现事件welcome.wxmlwelcome.js小程序的导航APIwx.redirectTowx.navigateTowx.switchTapObject...
    99+
    2023-05-13
    微信小程序的页面跳转 小程序怎么跳转页面 微信小程序跳转到其他页面
  • 微信小程序实现页面跳转动画效果
    微信小程序实现页面跳转动画效果在微信小程序中,页面跳转是一项非常常见的功能。为了提升用户体验,我们可以通过添加动画效果来让页面切换更加流畅和生动。下面我将介绍如何使用微信小程序的API来实现页面跳转动画效果,并附上具体的代码示例。首先,我们...
    99+
    2023-11-21
    动画效果 微信小程序 页面跳转
  • 微信小程序怎么仿淘宝热搜词在搜索框中实现轮播功能
    这篇文章给大家分享的是有关微信小程序怎么仿淘宝热搜词在搜索框中实现轮播功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果实现思路思路比较简单,主要是两点,1:input处于热...
    99+
    2022-10-19
  • 微信小程序使用uni-app实现首页搜索框导航栏功能详解
    目录前言一、兼容APP与H5的方式二、兼容小程序三、实现同时兼容前言 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下...
    99+
    2022-11-13
    小程序搜索框导航栏 微信小程序搜索框 微信小程序导航栏
  • uniapp小程序之配置首页搜索框功能的实现
    目录正文1、查阅官网配置搜索框pages配置项1.1 首先进入官网后找到如下内容1.2 如官网所示 style的说明如下,看图操作1.3 跳转指定的app-plus配置项1.4 导航...
    99+
    2022-11-13
  • 微信小程序如何实现点击文字页面跳转功能
    这篇文章主要介绍了微信小程序如何实现点击文字页面跳转功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:1、效果展示2、关键代码in...
    99+
    2022-10-19
  • 微信小程序中如何实现页面跳转及数据传递功能
    这篇文章主要介绍了微信小程序中如何实现页面跳转及数据传递功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转及数据传递详解...
    99+
    2022-10-19
  • 微信小程序如何实现商品列表跳转商品详情页功能
    目录引言1.1实现首页页面2.1实现调跳转到手机详情页总结引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标首页显示两行文字,多余的文字隐藏,...
    99+
    2022-11-13
  • 微信小程序怎么实现商品列表跳转商品详情页功能
    这篇文章主要介绍“微信小程序怎么实现商品列表跳转商品详情页功能”,在日常操作中,相信很多人在微信小程序怎么实现商品列表跳转商品详情页功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序怎么实现商品列表...
    99+
    2023-06-30
  • 微信小程序如何实现页面跳转与返回并回传数据的方法
    小编给大家分享一下微信小程序如何实现页面跳转与返回并回传数据的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!微信小程序 详解页面跳转与返回并回传数据A页面:.wxml文件<vie...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作