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

62、商品搜索_页面动态功能

1 输入框绑定值改变事件input事件

 获取到输入框的值
 合法性判断
 检验通过把输入框的值发送到后台
 返回的数据打印到页面上

绑定事件
pages\search\index.wxml

<view class="search_row">
    <input placeholder="请输入您要搜索的商品" bindinput="handleInput"></input>
    <button>取消</button>
</view>

触发事件
pages/search/index.js

// pages/search/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: { },
  
  // 输入框的值改变就会触发的事件
  handleInput(e){
    consloe.log(e);
  }
})

发送请求获取数据（数据接口）

pages/search/index.js

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

  /**
   * 页面的初始数据
   */
  data: {

  },

  // 输入框的值改变就会触发的事件
  handleInput(e){
    // 1 获取输入框的值
    const {value}=e.detail;
    // 2 检测合法性
    if(!value.trim()){
      // 值不合法
      return;
    }
    // 3 准备发送请求获取数据
    this.qsearch(value);
  },

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

测试输入1已得到返回值

pages/search/index.js
返回值数据填充到页面中

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

  /**
   * 页面的初始数据
   */
  data: {
    goods:[]
  },

  // 输入框的值改变就会触发的事件
  handleInput(e){
    // 1 获取输入框的值
    const {value}=e.detail;
    // 2 检测合法性
    if(!value.trim()){
      // 值不合法
      return;
    }
    // 3 准备发送请求获取数据
    this.qsearch(value);
  },

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

})

AppData的goods数据打印到页面中
pages\search\index.wxml

<view class="search_row">
    <input placeholder="请输入您要搜索的商品" bindinput="handleInput"></input>
    <button>取消</button>
</view>

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

测试输入1

存在bug（下篇博文解决_防抖技术）