搜索框的输入与失去焦点事件控制搜索结果(微信小程序)

微信小程序搜索模块动态切换

最新推荐文章于 2024-07-31 15:52:02 发布

原创最新推荐文章于 2024-07-31 15:52:02 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

微信小程序专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现输入框动态控制搜索模块显示的方法。通过input和blur事件监听，根据输入框状态动态切换展示数据渲染模块或正常模块，确保用户体验流畅。

1、实现输入框输入完成时显示数据渲染模块
输入框数据清空时,显示正常模块

思想:input事件监听输入框的值（用于判断当数据为空时，搜索div不渲染）
blur 失去焦点事件(用于监听当输入完成时，获取后台数据，控制搜索div 渲染)

如图1 输入过程不渲染数据  失去焦点时渲染数据

在这里插入图片描述
清空数据时显示如图2页面

代码如下：本事例为微信小程序
js

search(e) {
    if (!e.detail.value) {
      this.setData({
        show: false, 					//控制div的切换
        value:''
      })
 
    } else {
      this.setData({
        value: e.detail.value
      })

    }

  },
  //输入框失去焦点
  searchblur() {


    if (this.data.value) {
      this.setData({
        show: true    
      })
      this.bookSearch()
    } else {
      this.setData({
        show: false,
        searchData:[]
      })
    }

  },