【点单小程序】菜单页面实现搜索框+可滚动视图scroll-view

最新推荐文章于 2024-11-27 21:47:11 发布

原创

最新推荐文章于 2024-11-27 21:47:11 发布 · 618 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

搜索框实现

menu.wxml

<icon type="search" size="20" catchtap="fetchMenuData" />
  <input class="search-font" placeholder="查找所需的商品" style="text-align: center" value="{
   
   {query}}" bindinput="bindKeyInput" auto-focus />

其中placeholder是文本框默认的文字，bindinput是获取输入框的值，fetchMenuData是查询方法（后端接口后面再做开发，该地方空着

menu.js

//获取搜索框的输入
  bindKeyInput: function(e) {
   
   
    this.setData({
   
   
      query: e.detail.value
    })
  },
  //获取搜索商品结果
  fetchMenuData: function(query){
   
   
    var self = this;
    self.setData({
   
   
      hidden: false
    })
    var query = self.data.query;
    var page = self.data.page;
    wx.request({
   
    
      //后端接口
      url: "",
      success: function (res) {
   
   
        self.setData({
   
   
          // 数据
          hidden: true
        })
      }
    });
  }

可滚动视图实现

菜单功能主要是依赖scroll-view组件，当对应的view id属性为选择的 scroll-into-view，页面会做对应的滚动，前端会有许多细节上的坑，各位要注意点

menu.wxml

<!--菜单列表 -->
  <view class="menu-wrp">
    <!--菜单列表 左侧-->
    <scroll-view scroll-y="true" class="left-side">
      <block wx:for="{
   
   {menus}}" wx:key=