论坛 › 物联网 › 【微信小步伐开发】——奶茶点餐小步伐的制作（一）

万万哇 发表于 2026-2-11 07:17:24

【微信小步伐开发】——奶茶点餐小步伐的制作（一）

https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvNmFmMjJmZTc4MTRiM2EzNzQwNzFjMWQ0MWY0Mjk4MjcuanBlZyNwaWNfY2VudGVy
👨‍💻个人主页：@开发者-曼亿点
👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍💻 本文由 曼亿点 原创
👨‍💻 收录于专栏：微信小步伐开发
⭐🅰⭐


   奶茶点餐小步伐



⭐前言⭐

  随着智能手机的遍及和移动互联网的敏捷发展，微信小步伐作为一种新兴的应用形态，正渐渐成为人们一样寻常生存中不可或缺的一部门。尤其是在餐饮行业，微信小步伐为商家和顾客提供了更为便捷的服务方式。奶茶作为一种受欢迎的饮品，拥有广泛的消耗群体，开发一个功能美满的奶茶点餐小步伐不但可以提升用户体验，还能资助商家进步运营服从。
  本项目旨在开发一个专为奶茶店计划的微信小步伐点餐体系，通过当代化的技能本领，实现线上点餐、及时订单管理以及个性化服务。这一小步伐的开发过程将包罗需求分析、体系计划、前端与后端开发、用户体验优化等多个步调。
项目配景
  奶茶市场在比年来出现出快速增长的趋势，顾客对便捷和高效的点餐体验有着越来越高的盼望。传统的线下点餐方式每每碰面临列队等待、信息通报禁绝确等标题。微信小步伐的出现，为办理这些标题提供了新的办理方案。通过微信小步伐，顾客可以轻松地欣赏菜单、选择喜好的饮品、举行个性化定制，并快速完成付出。这不但提升了顾客的购物体验，也使得商家可以大概更好地管理订单和优化运营流程。
开发目的


[*]用户友好：计划轻巧易用的界面，使用户可以大概快速完成点餐流程，并享受流通的利用体验。
[*]功能全面：实现奶茶菜单欣赏、饮品定制、订单管理、付出功能等焦点功能。
[*]体系稳固：确保小步伐的稳固性和安全性，处理惩罚高并发访问时的性能需求。
[*]数据管理：提供及时的数据统计和分析功能，资助商家相识贩卖环境和顾客偏好。
技能概述
  为了实现上述目的，本项目将接纳微信小步伐开发框架，联合前端的WXML和WXSS技能、后端的云函数或服务器端编程，以及数据库的管理和数据处理惩罚技能。通过这些技能的有机联合，确保体系的高效性和稳固性。
根本目次展示：此中项目中的图片自行去欣赏器中探求，博主不提供。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzZhZWFhNTY5NGQyNDRiMzk0ZDdhMGI4OTk3ZDJhNjQucG5n
前期工作：app.json部门
{
"pages": [
    "pages/order/list/list",
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list",
    "pages/order/balance/balance",
    "pages/mine/mine",
   
    "pages/order/detail/detail"
],
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FF9C35",
    "navigationBarTitleText": "奶茶可可",
    "navigationBarTextStyle": "white"
},
"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#FF9C35",
    "borderStyle": "black",
    "list": [
      {
      "selectedIconPath": "images/home_s.png",
      "iconPath": "images/home.png",
      "pagePath": "pages/index/index",
      "text": "首页"
      },
      {
      "selectedIconPath": "images/order_s.png",
      "iconPath": "images/order.png",
      "pagePath": "pages/order/list/list",
      "text": "订单"
      },
      {
      "selectedIconPath": "images/mine_s.png",
      "iconPath": "images/mine.png",
      "pagePath": "pages/mine/mine",
      "text": "我的"
      }
    ]
},
"sitemapLocation": "sitemap.json"
}
🎶 一、点餐首页

  随着生存节奏的加快，越来越多的消耗者盼望可以大概在繁忙的一样寻常中快速完成奶茶点餐，享受鲜味而无需列队等候。为了满意这一需求，我们推出了这款专为奶茶店计划的微信小步伐，通过创新的技能本领，让您的点餐体验更加顺畅、高效。


[*]轻巧直观的界面：我们计划了清晰易懂的用户界面，资助您快速欣赏菜单、选择心仪的饮品，并轻松完成订单。
[*]个性化定制：支持多种饮品定制选项，您可以根据本身的口胃喜好调解甜度、冰块量等，打造属于您的专属奶茶。
[*]便捷付出方式：集成微信付出功能，让您可以安全、快捷地完成付出，无需再为找零或携带现金烦恼。
[*]及时订单追踪：随时检察您的订单状态，相识制作进度，安心等候鲜味奶茶的到来。
[*]数据统计与分析：为商家提供全面的数据支持，资助相识顾客需求和市场趋势，优化服务和产物。
用户体验
  我们充实思量了用户体验，力图通过每一个细节的优化，让您的点餐过程更加顺畅。无论是欣赏菜单、选择商品，照旧完成付出、检察订单，我们都力图为您提供无缝对接的利用体验。
  我们盼望通过这款小步伐，为奶茶爱好者提供一个高效、便捷的点餐平台，让每一位顾客都能享受到优质的服务和鲜味的饮品。同时，我们也等待通过数据分析资助商家更好地相识顾客需求，提升运营服从，推动业务增长。
(1)index.wxml

<!--index.wxml-->
<view>
<!-- 顶部轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <swiper-item>
      <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
</swiper>
<!-- 操作按钮 -->
<view class='btn-bar'>
    <view class='btn-block' bindtap='golist'>
      <view class="btn_op1">开始订餐</view>
    </view>
    <view class='btn-block'>
      <view class="btn_op2">预约订餐</view>
    </view>
</view>
<!-- 中部广告 -->
<view class="ad-box">
    <image src='../../images/2-1.jpg' class="image_ad"></image>
</view>
<!-- 底部横向滑动box -->
<view class='bottom-box'>
    <scroll-view scroll-x="true" class="scroll-box">
      <view class='slide-inline-box'>
      <image src='../../images/bottom_1.png' class='bottom-image'></image>
      </view>
      <view class='slide-inline-box'>
      <image src='../../images/bottom_2.png' class='bottom-image'></image>
      </view>
      <view class='slide-inline-box'>
      <image src='../../images/bottom_3.png' class='bottom-image'></image>
      </view>
    </scroll-view>
</view>
</view>
(2)index.wxss

/**index.wxss**/
.slide-image{
width:100%;
height:280rpx;
}
.btn_op1{
text-align: center;
font-size:14px;
color:#FF9C35;
padding: 5px 20px;
border:1px solid #FF9C35;
border-radius: 25px;
width: 100px;
z-index: 10;
}
.btn_op2{
text-align: center;
font-size:14px;
color:#B6D9A9;
padding: 5px 20px;
border:1px solid #B6D9A9;
border-radius: 25px;
width: 100px;
}
.btn-bar{
display: flex;
margin-top:20px;
}
.btn-block{
width: 50%;
display: flex;
justify-content:center;
}
.ad-box{
margin-top:30px;
width: 100%;
text-align: center;
}
.image_ad{
width: 95%;
height:370rpx;
}
.scroll-box{
display:flex;
white-space: nowrap;
width:95%
}
.bottom-box{
margin-top:40rpx;
display: flex;
justify-content:center;
}
.bottom-image{
width:300rpx;
height:170rpx
}
.slide-inline-box{
display:inline-block;
margin-right:10px;
}

(3)index.js

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
    //轮播图
    imgUrls: [
      '../../images/1.png',
      '../../images/3.png',
      '../../images/4.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
},
onLoad: function () {
   
},
golist: function () {
    wx.navigateTo({
      url: '../list/list'
    })
},
})


运行结果的体现：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNGQ4ZTljNmVlMTc4NDgxZjg4NGYzOGRjZTM4MjBmM2MucG5n
🎶 二、奶茶订单

  在奶茶点餐小步伐中，订单管理是确保顾客体验流通和商家运营高效的焦点功能之一。高效的订单处理惩罚不但能提升顾客满意度，还能优化商家的运营流程，实现业务的一连增长。
订单管理功能


[*]及时订单吸取：体系能及时吸取顾客的点餐哀求，并将订单信息准确通报到商家的配景，确保无延长处理惩罚。
[*]订单状态跟踪：提供详细的订单状态更新，从“待处理惩罚”到“制作中”、再到“已完成”，顾客可以及时检察每个阶段的进度。
[*]订单修改与取消：允许顾客在肯定时间内对订单举行修改或取消，方便应对临时需求变动。
[*]付出确认：集成付出体系，确保每一笔生意业务的安全性和准确性，自动更新订单状态。
[*]汗青订单纪录：提供订单汗青查询功能，资助顾客和商家检察和管理已往的生意业务纪录。
计划目的
[*]简化利用：通过直观的界面和流通的利用流程，简化订单管理的复杂性，让商家可以大概高效处理惩罚每一笔订单。
[*]进步准确性：淘汰人工干预，通过自动化的数据处理惩罚，低沉订单堕落的风险。
[*]加强透明度：提供清晰的订单状态跟踪，让顾客可以大概及时相识订单进度，加强服务透明度。
开发愿景
  我们的目的是通过准确的订单管理功能，为奶茶店提供一个可靠、高效的工具，不但提升顾客的使用体验，也资助商家优化运营，提升团体服务水平。通过这一体系，我们盼望可以大概推动奶茶店的业务增长，并为每一位顾客带来满意的购物体验。
(1)list.wxml

<view>

<view class="shopping"><!----><!--大框架-->
<view class="nav_left"><!--侧边栏盒子-->
    <block wx:for="{{leftitem}}" wx:key="id">
      <!--这里定义了一个变量index，并把这个变量赋值为index，这个是wx：for循环产生的下标，传到js，通过这个下标完成商品的显示-->
      <view class="nav_left_items {{count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{{index}}"><!--文字盒子-->
      {{item.name}}
      </view>
    </block>
</view>
<view class="nav_right"><!--右边主体部分-->
    <!--通过侧边栏的选择传到js中的index的值与js中data数据中的tag进行比较，完成商品的分类显示-->
    <view class="nav_right_goods" wx:for="{{rightitem}}" wx:key="id" wx:if="{{count==item.tag}}" bindtap="changeImage" ><!--商品详情的盒子-->
      <view bindtap="click_nav_right" data-index_two="{{index}}" class="nav">
      <image src="{{item.url}}" mode="widthFix" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;"></image><!--商品图片-->
      <view class="nav_right_textandprice"><!--文字和价格的盒子-->
          <text class="nav_right_text" style="color: black; font-size: 12px;">{{item.name}}</text><!--商品文字-->
          <view class="nav_right_price"><!--商品价格-->
            ￥{{item.price}}.00
          </view>
      </view>
      </view>
    </view>
</view>
</view>


<!-- 底部操作菜单 -->
<view class="operate-bar" wx:if="{{loading}}">
    <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}}">购物车是空的</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>
</view>
<!-- 选择弹窗 -->
<view class="drawer_screen" bindtap="selectInfo" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view class="drawer_box_ad" wx:if="{{showModalStatus}}">
<view class="drawer_content_ad">
    <view style='font-size:16px;display:flex;justify-content:center;'> {{listData.foods.name}} </view>
    <view class="select-line-nav">规格</view>
    <view style='display:flex'>
      <view class="select-tab {{index==sizeIndex?'select-active':''}}" wx:for="{{size}}" wx:key="unique" data-type='0' data-index='{{index}}' bindtap='chooseSE'>{{item}}</view>
    </view>
    <view class="select-line-nav">糖度</view>
    <view style='display:flex'>
      <view class="select-tab {{index==sugarIndex?'select-active':''}}" wx:for="{{sugar}}" wx:key="unique" bindtap='chooseSE' data-type='1' data-index='{{index}}'>{{item}}</view>
    </view>
    <view class="select-line-nav">温度</view>
    <view style='display:flex'>
      <view class="select-tab {{index==temIndex?'select-active':''}}" wx:for="{{tem}}" wx:key="unique" bindtap='chooseSE' data-type='2' data-index='{{index}}'>{{item}}</view>
    </view>
    <view class="select-price">¥{{listData.foods.specfoods.price}}.00
      <button class="btn-putIn" bindtap='addToCart'>加入购物车</button>
    </view>
</view>
</view>
<!-- 购物车 -->
<view class="drawer_screen" bindtap="showCartList" data-statu="close" wx:if="{{showCart}}"></view>
<view class="cartlist-float" wx:if="{{showCart}}">
<view style='background:#F0F0F0;height:30px'>
    <label class='label-cart-bar'>
      <label style='padding:5px'>已选商品</label>
    </label>
    <label class='icon-clear' bindtap='clearCartList'>
      <i class="iconfont icon-lajitong"></i>
      <label class="label-clear">清空购物车</label>
    </label>
</view>
<scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}">

    <view class='cart-list-box' wx:for="{{cartList}}" wx:key="unique" style='border-bottom:1px #E3E3E3 solid'>
      <view class='list-info'>
      <view>{{item.name}}</view>
      <view class='list-info-size'>{{item.detail}}</view>
      </view>
      <view style='width:50%;padding:10px;'>
      <view style='float:right'>
          <label class='activity-color'>¥ {{item.sum}}.00</label>
          <i class="iconfont icon-jian icon-li-circle" data-index="{{index}}" bindtap="decNumber"></i>
          {{item.number}}
          <i class="iconfont icon-jiahao2fill activity-color font20" data-index="{{index}}" bindtap="addNumber"></i>
      </view>
      </view>
    </view>
</scroll-view>
</view>
<!-- 优惠宣传条 -->
<view class='cut-bar' wx:if="{{sumMonney==0&&loading}}">
<label>满20立减3元(手机点餐专享)</label>
</view>
<view class='cut-bar' wx:if="{{sumMonney<20&&sumMonney!=0&&loading}}">
<label>满20立减3元,还差{{20-sumMonney}}元,去凑单></label>
</view>


(2)list.wxss

/* pages/list/list.wxss */

.hr {

border: 1px solid #ddbcbc;

width: 100%;

opacity: 0.6;

}

/*输入框样式*/

input {

margin: 15rpx 32rpx;

border: 1px solid #FF9C35;

border-radius: 50rpx;

text-align: center;

font-size: 32rpx;

}

/*布局样式*/

.content {

display: flex;

flex-direction: row;

}

/*大框架*/
.shopping {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color:         #808080;
}
/*左侧栏主盒子*/
.nav_left{
position: fixed;
top: 0;
left: 0;
display: inline-block;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
.nav_left .nav_left_items{
height: 30px;
line-height: 30px;
padding: 6px 0;
border-bottom: 1px solid #dedede;
font-size: 14px;
}
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
.nav{
display: flex;
padding: 40rpx;
}
.nav_right_textandprice{
display: flex;
flex-direction: column;
padding-left: 20rpx;
position: relative;
}
.nav_right_price{
color: #FF9C35;
position: absolute;
bottom: 20rpx;
}
.active-tag{
background-color:        white;
color: #FF9C35;
border-left: 5px solid #FF9C35;
border-radius: 5px;
}




.operate-bar{
z-index: 1001;
position: absolute;
bottom: 0px;
height:55px;
width:100%;
display: flex;
}
.gouwuche{
width:75%;
background:#353535;
height: 100%;

}
.gouwuche-icon{
font-size:40px;
color:#87888E;
margin-left:10px;
   position: relative;
}
.number-msg{
padding: 1px 7px;
border-radius:50%;
background:#FF9C35;
color:white;
font-size:14px;
position: absolute;
text-align: center;
top:0px;
right:-5px;
}

.gouwuche-price{
color:#A9A9A9;
display:flex;
align-items: center;
margin-left:10px;
font-size:15px
}
.submit-btn{
height:100%;
background:#F7F7F7;
width:25%;
display:flex;
}
.submit-btn-label{
color:#A9A9A9;
font-size:15px;
margin:auto;
}

.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}

.drawer_box_ad {
margin-left: 7%;
width: 86%;
overflow: hidden;
position: fixed;
top: 15%;
z-index: 1001;
background: #FFFFFF;
border-radius: 4px;
}
.cartlist-float{
width: 100%;
overflow: hidden;
position: fixed;   
z-index: 1001;
bottom: 55px;
max-height: 250px;
}


.drawer_content_ad {
height: 289px;
width: 100%;
padding: 10px;
}

.select-line-nav{
font-size:12px;
margin-left:5px;
margin-top:10px;
color:#ABABAB;
}

.select-tab{
padding:5px 7px;
border:1px solid #ABABAB;
font-size:12px;
border-radius:5px;
margin:5px;
color:#ABABAB;
z-index:1002;
}
.select-active{
color:#FF9C35;
border:1px solid #FF9C35;
}
.select-price{
font-size:14px;
color:#FF9C35;
margin-top:20px;
display:flex;
align-items: center;
margin-left:10px;
}
.btn-putIn{
height:40px;
width:100px;
font-size:14px;
background:#FF9C35;
color:white;
margin-right:20px;
}


.activity-color{
color:#FF9C35;
}
.color-white{
color:white;
}
.activity-color-bg{
background:#FF9C35;
}

.label-cart-bar{
color:#878787;
font-size:12px;
border-left:4px solid #FF9C35;
margin-left: 20px;
}
.icon-clear{
    color:#878787;
    float: right;
    margin-right: 10px;
}
.label-clear{
    color:#878787;
    font-size: 12px;
}
.cart-list-box{
background:#FFFFFF;
display:flex;
font-size:13px;
}
.list-info{
width:50%;
padding:5px 15px;
}
.list-info-size{
font-size:10px;
color:#B1B1B1;
}
.icon-li-circle{
margin-left:15px;
font-size:20px
}
.font20{
font-size:20px
}
.cart-scroll-list{
height:450rpx;
}
.cut-bar{
height:20px;
position: fixed;
bottom:55px;
background:#FFCD9B;
width:100%;
color:#FFF7EC;
font-size:12px;
text-align:center;
}



(3)list.js

// pages/list/list.js
Page({

changeImage:function(){
    wx.navigateTo({
      url: '/pages/qin/qin',
    })
   
      },
      
      data: {
      //leftitem是定义左边侧边栏的选项，rightitem是定义右边商品的展示，tag主要是把商品进行一个类别的划分
      leftitem:[
          {id:1,name:"真鲜果茶"},
          {id:2,name:"醇香奶茶"},
          {id:3,name:"轻乳系列"},
          {id:4,name:"新鲜冰淇淋"},
          {id:5,name:"芝士奶盖"},
          {id:6,name:"原味纯茶"},
          {id:7,name:"美味咖啡"}
      ],
      rightitem:[
          {id:1,name:"菠萝甜心橘",price:8,url:"../../images/caomeibobo.jpg",tag:0,},
          {id:1,name:"草莓啵啵",price:9,url:"../../images/molilvcha.jpg",tag:0},
          {id:1,name:"柠檬绿茶",price:5,url:"../../images/ningmenglvcha.jpg",tag:0},
          {id:2,name:"芋圆奶茶",price:8,url:"../../images/yuanweibingqiling.jpg",tag:1},
          {id:2,name:"布丁奶茶",price:7,url:"../../images/zhishilvcha.jpg",tag:1},
          {id:3,name:"草莓椰奶露",price:7,url:"../../images/zhishisijic.jpg",tag:2},
         
      ],
      count:0,//我们把前端的index值传到js中，并把它赋值给count，储存在js中，方便右边商品通过count完成与侧边栏的相同的那一类的商品展示，同时完成侧边栏的样式，保证选中的选项有与其他未选择的选项的区别
      },
      click_nav_right(event){//这个主要是完成商品分类页的数据传递到商品详情页
      var data_one=event.currentTarget.dataset.index_two//前端的右边商品定义了一个index_two这个变量，我们在js中把这个值赋值给data变量，并传递到商品详情页
      //console.log(data_one)
      wx.navigateTo({//通过这个函数，完成两个页面中数据的传递，具体的用法可以到微信的小程序文档中搜索，当然除了用这个函数，也可以通过引用全局变量的方式完成数据的传递
          url: '/pages/detail/detail?data='+data_one,
      })
      },
      switchRightTab(event){
      this.setData({
          count:event.target.dataset.index
      });//改变count原本的值，完成右侧商品的根据侧边栏的不同展示商品
      },

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
    var that = this;
    var sysinfo = wx.getSystemInfoSync().windowHeight;
    console.log(sysinfo)
    wx.showLoading({
      title: '努力加载中',
    })
    //将本来的后台换成了easy-mock 的接口，所有数据一次请求完 略大。。
    wx.request({
      url: 'https://easy-mock.com/mock/59abab95e0dc66334199cc5f/coco/aa',
      method: 'GET',
      data: {},
      header: {
      'Accept': 'application/json'
      },
      success: function (res) {
      wx.hideLoading();
      console.log(res)
      that.setData({
          listData: res.data,
          loading: true
      })
      }
    })
},
selectMenu: function (e) {
    var index = e.currentTarget.dataset.index
    console.log(index)
    this.setData({
      activeIndex: index,
      toView: 'a' + index,
      // scrollTop: 1186
    })
    console.log(this.data.toView);
},
scroll: function (e) {
    console.log(e)
    var dis = e.detail.scrollTop
    if (dis > 0 && dis < 1189) {
      this.setData({
      activeIndex: 0,
      })
    }
    if (dis > 1189 && dis < 1867) {
      this.setData({
      activeIndex: 1,
      })
    }
    if (dis > 1867 && dis < 2180) {
      this.setData({
      activeIndex: 2,
      })
    }
    if (dis > 2180 && dis < 2785) {
      this.setData({
      activeIndex: 3,
      })
    }
    if (dis > 2785 && dis < 2879) {
      this.setData({
      activeIndex: 4,
      })
    }
    if (dis > 2879 && dis < 4287) {
      this.setData({
      activeIndex: 5,
      })
    }
    if (dis > 4287 && dis < 4454) {
      this.setData({
      activeIndex: 6,
      })
    }
    if (dis > 4454 && dis < 4986) {
      this.setData({
      activeIndex: 7,
      })
    }
    if (dis > 4986) {
      this.setData({
      activeIndex: 8,
      })
    }
},
/**
   * 生命周期函数--监听页面初次渲染完成
   */
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
    });
},

chooseSE: function (e) {
    var index = e.currentTarget.dataset.index;
    var type = e.currentTarget.dataset.type;
    if (type == 0) {
      this.setData({
      sizeIndex: index
      });
    }
    if (type == 1) {
      this.setData({
      sugarIndex: index
      });
    }
    if (type == 2) {
      this.setData({
      temIndex: index
      });
    }
},

addToCart: function () {
    var a = this.data
    var addItem = {
      "name": a.listData.foods.name,
      "price": a.listData.foods.specfoods.price,
      "detail": a.size + "+" + a.sugar + "+" + a.tem,
      "number": 1,
      "sum": a.listData.foods.specfoods.price,
    }
    var sumMonney = a.sumMonney + a.listData.foods.specfoods.price;
    var cartList = this.data.cartList;
    cartList.push(addItem);
    this.setData({
      cartList: cartList,
      showModalStatus: false,
      sumMonney: sumMonney,
      cupNumber: a.cupNumber + 1
    });
    console.log(this.data.cartList)
},
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
    });
},
addNumber: function (e) {
    var index = e.currentTarget.dataset.index;
    console.log(index)
    var cartList = this.data.cartList;
    cartList.number++;
    var sum = this.data.sumMonney + cartList.price;
    cartList.sum += cartList.price;

    this.setData({
      cartList: cartList,
      sumMonney: sum,
      cupNumber: this.data.cupNumber+1
    });
},
decNumber: function (e) {
    var index = e.currentTarget.dataset.index;
    console.log(index)
    var cartList = this.data.cartList;

    var sum = this.data.sumMonney - cartList.price;
    cartList.sum -= cartList.price;
    cartList.number == 1 ? cartList.splice(index, 1) : cartList.number--;
    this.setData({
      cartList: cartList,
      sumMonney: sum,
      showCart: cartList.length == 0 ? false : true,
      cupNumber: this.data.cupNumber-1
    });
},
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'
      })
    }
},

onReady: function () {

},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {

},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {

},

/**
   * 生命周期函数--监听页面卸载
   */
onUnload: function () {

},

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
onPullDownRefresh: function () {

},

/**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () {

},

/**
   * 用户点击右上角分享
   */
onShareAppMessage: function () {

}
})
运行结果的体现：
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvY2RkZTQyM2EzMTY1NGI0OGFmODU0YTU4NDk1ZjgyODYucG5n
竣事语🥇

以上就是微信小步伐之列表渲染
一连更新微信小步伐教程，欢迎各人订阅系列专栏🔥微信小步伐
你们的支持就是曼亿点创作的动力💖💖💖
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvZTk3ZDFiMjQyNWVhMDkzZmM3ZTEwNjFmOTA4Yjg5NDIuZ2lm

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

查看完整版本: 【微信小步伐开发】——奶茶点餐小步伐的制作（一）