微信小程序项目_秋泊优选69

64、商品搜索_页面取消按钮功能

1 给商品列表添加对应的超链接——>跳转到商品详情页面
pages\search\index.wxml

<view class="search_row">
    <input value="{{inpValue}}" placeholder="请输入您要搜索的商品" bindinput="handleInput"></input>
    <button bindtap="handleCancel" hidden="{{!isFocus}}">取消</button>
</view>

<view class="search_content">
    <navigator url="/pages/goos_detail/index?goods_id={{item.goods_id}}" class="search_item" wx:for="{{goods}}" wx:key="goods_id">
        {{item.goods_name}}
    </navigator>
</view>

pages\search\index.js

// 0 引入 来发送请求的方法 一定要把路径补全
import {request} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goods:[],
    // 取消按钮是否显示
    isFocus:false,
    // 输入框的值 
    inpValue:""
  },
  TimeId:-1,

  // 输入框的值改变就会触发的事件
  handleInput(e){
    // 1 获取输入框的值
    const {value}=e.detail;
    // 2 检测合法性
    if(!value.trim()){
    
      this.setData({
        goods:[],
        isFocus:false
      })

      // 值不合法
      return;
    }
    // 3 准备发送请求获取数据
    clearTimeout(this.TimeId);
    this.TimeId=setTimeout(()=>{
      this.qsearch(value);
    }, 1000);

    // 输入完成显示 取消按钮
    this.setData({
      isFocus:true
    })
    
  },

  // 发送请求获取搜索建议数据
  async qsearch(query){
    const res=await request({url: "/goods/qsearch", data:{query}});
    console.log(res);
    this.setData({
      goods:res
    })
  },

  // 点击取消按钮
  handleCancel(){
    this.setData({
      inpValue:"",
      isFocus:false,
      goods:[]
    })
  }


})