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

搜索框实现

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="id" wx:for-item="menu">
        <view class="menu-item" data-id="{{menu.id}}" data-tag="{{menu.tag}}" bindtap="selectMenu">
          <view class="{{selectedMenuId == menu.id ? 'bc_gray':'bc_white' }}">
            <view class="menu-item-wrp">
              <text class="m-item-title">{{menu.name}}</text>
            </view>
          </view>
        </view>
      </block>
      <view class="menu-footer"></view>
    </scroll-view>
    <!--菜单列表 右侧-->
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="right-side">
      <block wx:for="{{menus}}" wx:key="id" wx:for-item="menu">
        <view>
          <view id="{{menu.tag}}" class="dish-category-title">{{menu.name}}</view>
          <block wx:for="{{menu.dishs}}" wx:key="id" wx:for-item="dish">
            <view class="dish-item">
              <view class="dish-item-wrp">
                <view class="dish-item-pic">
                  <image class="image" src="{{dish.pic}}" />
                </view>
                <view class="dish-item-info">
                  <view>
                    <text class="dish-item-name">{{dish.name}}</text>
                  </view>
                  <view style="margin-top: 15px;">
                    <text class="dish-item-money">¥{{dish.price}}</text>
                  </view>
                </view>
                <view class="dish-item-count">
                  <view class="dish-item-tab">
                    <view hidden="{{dish.count == 0}}" class="dish-item-count-minus" data-id="{{dish.id}}" data-cid="{{menu.id}}" bindtap="minusCount">
                      <image class="image" src="../../images/menu/countMinus.jpg" />
                    </view>
                  </view>
                  <view class="dish-item-count-text dish-item-tab">
                    <text hidden="{{dish.count == 0}}">{{dish.count}}</text>
                  </view>
                  <view class="dish-item-count-plus" data-id="{{dish.id}}" data-cid="{{menu.id}}" bindtap="addCount">
                    <image class="image" src="../../images/menu/countSelAdd.jpg" />
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </block>
      <view class="dish-footer"></view>
    </scroll-view>
  </view>

目前菜单的名称都写死在js文件里，后续搭建后台系统时会做迁移

menus:[{
      id:1,
      tag:'aa',
      name:'特色小吃',
      icon:'',
      dishs:[
        {
          id:1,
          price:5,
          name:'原味韭菜粿',
          pic:'../../images/menu/menu_1.jpg',
          count:0
        }
      ]},{
      id:2,
      tag:'bb',
      name:'加料',
      icon:'',
      dishs:[
        {
          id:1,
          price:2,
          name:'鸡蛋',
          pic:'../../images/menu/menu_2.jpg',
          count:0
        },{
          id:2,
          price:3,
          name:'火腿',
          pic:'../../images/menu/menu_2.jpg',
          count:0
        },{
          id:3,
          price:4,
          name:'热狗',
          pic:'../../images/menu/menu_2.jpg',
          count:0
        },{
          id:4,
          price:5,
          name:'龙虎斗',
          pic:'../../images/menu/menu_2.jpg',
          count:0
        }
      ]},{
        id:3,
        tag:'cc',
        name:'餐具',
        icon:'',
        dishs:[
          {
            id:1,
            price:0,
            name:'需要餐具',
            pic:'../../images/menu/menu_2.jpg',
            count:0
          },{
            id:2,
            price:0,
            name:'不需要餐具',
            pic:'../../images/menu/menu_2.jpg',
            count:0
          }
        ]}
    
  ]

CSS知识点

border-radius可以设置边框的圆角，数值越大越弯曲

padding属性表示内边距，可以指定1到4个参数。参数的顺序是：上、右、下、左（顺时针方向）。

• 如果只提供一个参数，这个值将会被应用到所有的padding上。
• 如果提供两个参数，第一个值将应用到上下padding，第二个值将应用到左右padding。
• 如果提供三个参数，第一个值将应用到上padding，第二个值将应用到左右padding，第三个值将应用到下padding。
• 如果提供四个参数，这些值将按顺序分别应用到上、右、下、左padding。

字体居中或模块居中可以用

display: flex;
  justify-content: center;
  align-items: center;

或

  margin: 0 auto

目前实现效果如图：

第二个页面的项目代码同步更新了，有需要自取：https://gitee.com/tenneling/order-mini-app