首页 > 其他分享 >搜索取消

搜索取消

时间:2023-10-21 23:46:25浏览次数:26  
标签:goods isSearching 取消 res value height api 搜索

<view class="search">
  <view class="search_top">
    <input placeholder="请输入搜索内容" bindinput="handleInput" value="{{value}}"></input>
    <button bindtap="handleSearch">{{isSearching ? '取消' : '搜索'}}</button>
  </view>
  <navigator class="goods_item" wx:for="{{goods}}" url="/pages/details/details?goods_id={{item.goods_id}}" wx:if="{{isSearching}}">{{item.goods_name}}</navigator>
</view>
const { registerUniformDesc } = require("XrFrame/xrFrameSystem")

Page({
  data: {
    goods: [],
    value: '',
    isSearching: false
  },
  onl oad: function(options) {
    this.requestCategories()
  },
  handleInput(e) {
    this.setData({
      value: e.detail.value
    })
  },
  handleSearch() {
    const { value, isSearching } = this.data
    if (isSearching) {
      this.setData({
        value: '',
        isSearching: false,
        goods: []
      })
    } else {
      if (!value) {
        registerUniformDesc
      }
      this.requestGoods(value)
      this.setData({
        isSearching: true
      })
    }
  },
  requestCategories() {
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      success(res) {
        console.log(res)
      }
    })
  },
  requestGoods(query) {
    const that = this
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch',
      data: {
        query: query
      },
      success(res) {
        that.setData({
          goods: res.data.message
        })
      }
    })
  }
})
page{
  background-color: #ddd;
}
.search_top{
  padding: 20rpx;
  height: 70rpx;
  display: flex;
}
.search_top input{
  flex: 4;
  background-color: #fff;
  height: 100%;
  font-size: 25rpx;
  padding-left: 20rpx;
}
.search_top button{
  flex:1;
  width: 150rpx;
  font-size: 20rpx;
}
.goods_item{
  font-size: 32rpx;
  padding: 10rpx;
  border-bottom: 2rpx solid #eee;
  height: 60rox;
  line-height: 60rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

 

标签:goods,isSearching,取消,res,value,height,api,搜索
From: https://www.cnblogs.com/yhgz/p/17779766.html

相关文章

  • ​在二叉搜索树中查找第n个最小节点的Python实现
    二叉搜索树(BinarySearchTree,BST)是一种非常常用的数据结构,它具有许多优秀的性质,例如插入、删除和查找的效率都非常高。今天我们要探讨的问题是:如何在二叉搜索树中查找第n个最小的节点。 首先,我们需要明白二叉搜索树的一个重要性质:对于任何一个节点,其左子树中的所有节点的值都小于......
  • Vue进阶(幺玖玖):vue 输入框中按enter键实现搜索或表单提交
    在前端项目开发过程中,为优化用户体验,可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下:el-input监听键盘按下状态得用@keyup.enter.native,如果是非el-input组件,可以直接用@keyup.enter。<el-input@keyup.enter.native="search"v-model='form.searchAttr'></el......
  • 4.三大免费渠道-手淘搜索篇
    1.手淘搜索两种排名方式: 2.综合排名提高技巧: 3.操作排名注意点: 3_1.单量控制整体趋势有波动但整体趋势递增: ......
  • 【图像分割】基于回溯搜索算法BSA的多阈值图像分割算法研究附Matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 《动手学深度学习 Pytorch版》 9.8 束搜索
    本节将介绍几大:贪心搜索(greedysearch)策略穷举搜索(exhaustivesearch)束搜索(beamsearch)9.8.1贪心搜索贪心搜索已用于上一节的序列预测。对于输出序列的每一时间步\(t'\),都从\(\boldsymbol{Y}\)中找到具有最高条件概率的词元,即:\[y_{t'}=\mathop{\arg\max}\limits......
  • 获取二叉搜索树中节点值的和等于指定输入整数的所有路径
    二叉搜索树(BST)是一种特殊的二叉树,其每个节点的值都大于其左子树的所有节点的值,并且小于其右子树的所有节点的值。由于这种特性,我们可以在BST中快速查找、插入、删除节点。在BST中,我们可以通过遍历所有路径来找到节点值的和等于指定整数的所有路径。以下是一个使用Python实现的例子:p......
  • 在Java中,可以使用`java.nio.file`包中的`Files`类来进行文件搜索。以下是一种模糊搜索
    在Java中,可以使用`java.nio.file`包中的`Files`类来进行文件搜索。以下是一种模糊搜索文件的方法:```javaimportjava.io.IOException;importjava.nio.file.*;importjava.nio.file.attribute.BasicFileAttributes;publicclassFileSearch{publicstaticvoidmain(String......
  • 数据结构之美:如何优化搜索和排序算法
    文章目录搜索算法的优化1.二分搜索2.哈希表排序算法的优化1.快速排序2.归并排序总结......
  • Firefox 火狐浏览器 添加自定义搜索引擎 并屏蔽特定网站
    火狐浏览器添加自定义搜索引擎并屏蔽特定网站记录一下火狐浏览器(Firefox)添加自定义搜索引擎,并屏蔽特定网站的两种操作(注:本文用XXXX代替真实网站)。搜索引擎搜索时,有很多重复且无用的结果,部分有用的信息也需要登录关注才能看。这些内容大部分源于某些个网站,占据了大部分搜索结果......
  • “当当平台关键字搜索API:轻松实现高效购物,获取海量商品信息!“
    1688商品评论接口是一种供卖家使用的接口,可以让卖家通过该接口维护商品的评论信息,包括评论内容、评分、评论时间等等。通过使用该接口,卖家可以方便地管理商品的评论信息,包括查看、修改、删除评论等操作。同时,该接口还支持卖家对商品进行评分,以帮助其他买家更好地了解商品的质量和特......