微信小程序项目之一点点的点餐界面

实现图

wxml代码

<!-- 左侧菜单 -->
<view class="list-left-menu">
  <view wx:for="{{listData}}" wx:key="unique" class="{{index==activeIndex?'list-left-menu-box-selected':'list-left-menu-box-unselect'}}" data-index="{{index}}" bindtap='selectMenu'>
    <view class="list-menu-name">{{item.name}}</view>
  </view>
</view>
<view>
  <image class="list-right-menu" src="/pages/diandan/resources/pic/diandna-pic.jpg"></image>
</view>
<!-- 右侧菜单 -->
<scroll-view class="scroll-view-t" scroll-y="true" style='height:{{scrollH}}rpx;' bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view class="content" id="a{{index}}" wx:for="{{listData}}" wx:key="unique">
    <view class='list-tab'>{{item.name}}</view>
    <view class='content-list' wx:for="{{item.foods}}" wx:key="unique" wx:for-item="items" wx:for-index="index">
      <view class='list-image-box'>
        <image class="list-image" mode="widthFix" src="/pages/image/naicha.png" lazy-load></image>
      </view>
      <view class='issue-name'>
        <view>{{item.foods[index]}}</view>
        <view style='margin-top:20rpx;color:#824920'>
          ¥ {{item.price[index]}}.00
          <i class="iconfont icon-jiahao2fill plus-icon" data-type="{{index}}" data-index="{{indexs}}" bindtap="selectInfo"></i>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
<!-- 底部操作菜单 -->
<view class="operate-bar">
  <view class='gouwuche'>
    <view style='padding:5px;display:flex'>
      <i class="iconfont icon-gouwuchefill gouwuche-icon {{sumMonney!=0?'activity-color':'' }}" bindtap="showCartList">
        <span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span>
      </i>

      <view class='gouwuche-price' wx:if="{{sumMonney==0}}">¥ 0</view>
      <view class='gouwuche-price' style='color:white;font-size:18px' wx:if="{{sumMonney!=0}}">¥ {{sumMonney}}.00</view>
    </view>
  </view>
  <view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}" bindtap='goBalance'>
    <view class="submit-btn-label {{sumMonney!=0?'color-white':'' }}">去结算</view>
  </view>
</view>

js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    listData: [{
        id: 1,
        name: '店长推荐',
        foods: ['四季春+珍波椰', '云朵百香青', '云朵葡萄柚青', '清香乌龙茶', '冰淇淋红茶'],
        price: [7, 17, 17, 7, 13],
        num: [0, 0, 0, 0, 0]
      },
      {
        id: 2,
        name: '找好茶',
        foods: ['阿萨姆红茶', '茉莉绿茶', '四季春茶', '清香乌龙茶', '翡翠柠檬', '蜂蜜绿'],
        price: [7, 7, 7, 7, 12, 12],
        num: [0, 0, 0, 0, 0, 0]
      },
      {
        id: 3,
        name: '找口感',
        foods: ['波霸奶茶', '波霸奶绿', '波霸红', '波霸绿', '珍珠奶茶', '珍珠奶绿'],
        price: [10, 10, 7, 7, 10, 10],
        num: [0, 0, 0, 0, 0, 0]
      },
      {
        id: 4,
        name: '找奶茶',
        foods: ['奶茶', '奶绿', '四季奶青', '乌龙奶茶', '红茶玛奇朵', '乌龙玛奇朵'],
        price: [10, 10, 10, 10, 12, 12],
        num: [0, 0, 0, 0, 0, 0]

      },
      {
        id: 5,
        name: '找新鲜',
        foods: ['柠檬汁', '金桔柠檬', '柠檬蜜', '柠檬养乐多', '蜜茶'],
        price: [12, 12, 13, 15, 12],
        num: [0, 0, 0, 0, 0]
      },
      {
        id: 6,
        name: '找拿铁',
        foods: ['红茶拿铁', '绿茶拿铁', '四季拿铁', '乌龙拿铁', '焦糖红茶拿铁'],
        price: [13, 13, 13, 13, 14],
        num: [0, 0, 0, 0, 0]
      }
    ],
    activeIndex: 0,
    scrollH: 1000,
    toView: 'a0',
    scrollTop: 100,
    cupNumber: 0,
    sumMonney: 0,
    loading: false,
    // 如果是true的话，会直接弹出来
    showModalStatus: false,
  },

  selectMenu: function(e) {
    var index = e.currentTarget.dataset.index
    // console.log(index)
    this.setData({
      activeIndex: index,
      toView: 'a' + index,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    var sysinfo = wx.getSystemInfoSync().windowHeight;
    console.log(sysinfo)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },
  selectInfo: function(e) {
    var type = e.currentTarget.dataset.type;
    var index = e.currentTarget.dataset.index;
    this.setData({
      showModalStatus: !this.data.showModalStatus,
      currentType: type,
      currentIndex: index,
      sizeIndex: 0,
      sugarIndex: 0,
      temIndex: 0
    });
  },
  notice: function() {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '因含有规格，请在购物车内删减',
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          that.setData({
            showCart: true
          });
        }
      }
    })
  },
  showCartList: function() {
    console.log(this.data.showCart)
    if (this.data.cartList.length != 0) {
      this.setData({
        showCart: !this.data.showCart,
      });
    }

  },
  clearCartList: function() {
    this.setData({
      cartList: [],
      showCart: false,
      sumMonney: 0
    });
  },
  goBalance: function() {
    if (this.data.sumMonney != 0) {
      wx.setStorageSync('cartList', this.data.cartList);
      wx.setStorageSync('sumMonney', this.data.sumMonney);
      wx.setStorageSync('cupNumber', this.data.cupNumber);
      wx.navigateTo({
        url: '../order/balance/balance'
      })
    }
  },
 })

项目地址：微信小程序——仿一点点地址