根据搜索栏查询

今天要做的目标就是如图（搜索栏查询）

下面开始写方法：

1.先打开uni网址  uni-app官网 

找到uni中的搜索栏

找到自己需要用的关键字（这里我直接找到贴出来了）

因为是搜索功能所以我们直接使用 placeholder这个关键字

代码的话写在这个位置即可

 网页里面就已经展示出来了，看一下效果图

 下面写入点击按钮，继续从uni中查找

 写入刚才的代码中即可

<uni-search-bar @confirm="doSearch" placeholder="请输入要查询的手机号码"></uni-search-bar>

下面我们开始写入 methods中

doSearch(e){
      console.log(e.value)
      uni.request({
          url: 'http://localhost:8070/user/list_by_phone/'+e.value, //仅为示例，并非真实接口地址。
          success: (res) => {
          this.userList=res.data.data;   
            this.pageTotle=res.data.rows;
          }
      });

写入后我们在看网页

 效果出来的话就说明我们已经成功了，但还可以做的更好，下面开始优化

我们再继续打开uni的网址 

在按钮事件中找到@input按钮

然后再methods心中写入即可

这里需要注意的是用 @input的时候就不需要  .value了，因为我们看图  input按钮的返回参数就直接是 e=value 不和 confirm的 e={value:Number}样，所以 直接写e就行了。

inputWatcher(e){
      uni.request({
                url: 'http://localhost:8070/user/list_by_phone/'+e, //仅为示例，并非真实接口地址。
                success: (res) => {
                this.userList=res.data.data;   
                  this.pageTotle=res.data.rows;
                }
            });
      }

这样就完成了