第62讲商品搜索动态实现以及性能优化

商品搜索后端动态获取数据

后端动态获取数据:

bash 复制代码
    /**
     * 商品搜索
     * @param q
     * @return
     */
    @GetMapping("/search")
    public R search(String q){
        List<Product> productList = productService.list(new QueryWrapper<Product>().like("name", q));
        Map<String,Object> map=new HashMap<>();
        map.put("message",productList);
        return R.ok(map);
    }

定义productList

bash 复制代码
    /**
     * 页面的初始数据
     */
    data: {
      productList:[], // 商品数组
      inputValue:"", // 输入框的值
      isFocus:false // 取消 按钮 是否显示
    },

前端调用

bash 复制代码
  /**
   * 请求后端 商品搜索
   */
  async search(q){
    const result = await requestUtil({
      url: '/product/search',
      data:{q}
    });
    this.setData({
      productList: result.productList
    })
  },
bash 复制代码
    // 处理input事件
    handleInput(e){
      const {value}=e.detail;
      if(!value.trim()){
        this.setData({
          productList:[],
          isFocus:false
        })
        return;
      }
      this.setData({
        isFocus:true
      })
      clearTimeout(this.TimeoutId);
      this.TimeoutId=setTimeout(()=>{
        this.search(value)
      },1000)
     
    },

页面渲染:

bash 复制代码
<view class="search_row">
  <input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
  <button hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content">
  <navigator
    class="search_item"
    wx:for="{{productList}}"
    wx:key="id"
    url="/pages/product_detail/index?id={{item.id}}"
  >
  {{item.name}}
  </navigator>
</view>

样式:

bash 复制代码
page{
  background-color: #F9F9F9;
  padding-top: 20rpx;
}

.search_row{
  height: 50rpx;
  display: flex;
  input{
    background-color: #FFFFFF;
    flex:1;
    height: 100%;
    padding-left: 30rpx;
  }
  button{
    display:flex;
    justify-content: center;
    align-items: center;
    width:110rpx !important;
    font-size: 26rpx;
    padding: 0;
    margin: 0 10rpx;
    height: 100%;
  }
}

.search_content{
  margin-top: 15rpx;
  padding: 0px;
  .search_item{
    background-color: #FFFFFF;
    font-size: 26rpx;
    padding: 15rpx;
    align-items: center;
    border-bottom: 1rpx solid #EAEAEA;

    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

取消按钮:

bash 复制代码
<view class="search_row">
  <input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
  <button hidden="{{!isFocus}}">取消</button>
</view>
bash 复制代码
  // 点击 取消按钮
  handleCancel(){
    this.setData({
      productList:[], // 商品数组
      isFocus:false, // 取消 按钮 是否显示
      inputValue:"" // 输入框的值
    })
  },

搜索性能优化

搞个定时器

bash 复制代码
// 处理input事件
    handleInput(e){
      const {value}=e.detail;
      if(!value.trim()){
        this.setData({
          productList:[],
          isFocus:false
        })
        return;
      }
      this.setData({
        isFocus:true
      })
      clearTimeout(this.TimeoutId);
      this.TimeoutId=setTimeout(()=>{
        this.search(value)
      },1000)
     
    },
相关推荐
Liamhuo26 分钟前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_27 分钟前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生36 分钟前
React 组件渲染
前端·react.js
sjd_积跬步至千里41 分钟前
CSS实现文字横向无限滚动效果
前端
维他AD钙43 分钟前
前端基础避坑:3 个实用知识点的简单用法
前端
journs44 分钟前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙1 小时前
elpis项目DSL设计分享
前端
李李记1 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞1 小时前
快速掌握 ProseMirror 的核心概念
前端
ygria1 小时前
样式工程化:如何实现Design System
前端·前端框架·前端工程化