引言：外卖已经成为了都市人的必备，在无数个来不及（懒得）做饭的时刻拯救孤单寂寞的胃。美团外卖无疑是外卖届的领头羊，它的很多功能与设计都值得我们学习。本文将从五个方面，对美团外卖展开产品分析，希望对你有帮助。
一.首页
部分代码：
<view class="container">
<view class="header {{scrollDown?'scrolled':''}}">
<view class="location ellipsis" bindtap="toNearby">
<image class="icon" src="/imgs/index/icon_location.png"/>
{{address}}
</view>
<view class="search" bindtap="tapSearch">
<image class="icon" src="/imgs/index/icon_search.png"/>
<i class="fa fa-home"></i>
烤鸭
</view>
</view>
<scroll-view scroll-y="true" scroll-into-view="{{scrollIntoView}}" bindscroll="onScroll">
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500">
<block wx:for="{{banners}}" wx:key="id">
<swiper-item>
<image bindtap="tapBanner" data-id="{{index}}" src="{{item.img}}"/>
</swiper-item>
</block>
</swiper>
<swiper class="section icons" indicator-dots="true" autoplay="" interval="" duration="500">
<swiper-item wx:for="{{icons}}" wx:for-item="list" wx:key="id">
<view class="icon" wx:for="{{list}}" wx:for-item="icon" wx:key="id" bindtap="toNearby">
<image src="{{icon.img}}"/>
<text>{{icon.name}}</text>
</view>
</swiper-item>
</swiper>
<view class="section section-big discount">
<view class="title">优惠专区</view>
<image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/dicount.jpg"/>
</view>
<view class="section section-big preferred">
<view class="title">为你优选</view>
<image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/preferred.jpg"/>
</view>
<view class="section section-big special">
<view class="title">特色频道</view>
<image class="content" bindtap="toNearby" src="http://wxapp.im20.com.cn/impublic/waimai/imgs/index/special.jpg"/>
</view>
<view id="nearby" class="section section-big nearby">
<view class="title">附近商家</view>
<view class="filters">
<view class="filter {{filterId==1?'active':''}}" data-id="1" bindtap="tapFilter">综合排序<text class="v">↓</text>
</view>
<view class="filter {{filterId==2?'active':''}}" data-id="2" bindtap="tapFilter">销量最高<text class="v">↓</text>
</view>
<view class="filter {{filterId==3?'active':''}}" data-id="3" bindtap="tapFilter">距离最近<text class="v">↓</text>
</view>
</view>
<view class="shop" wx:for="{{shops}}" wx:key="id">
<navigator url="/page/shop/shop?id={{item.id}}">
<image src="{{item.img}}"/>
</navigator>
</view>
</view>
<view class="loading">努力加载中...</view>
</scroll-view>
</view>
效果图：
下拉：
二.详情页
部分代码：
<view class="container">
<view class="header {{scrollDown?'hidden':''}}">
<image class="logo" src="{{shop.logo}}"/>
<view class="name ellipsis">{{shop.name}}</view>
<view class="welcome ellipsis">公告：欢迎光临{{shop.name}}！</view>
<view class="follow" bindtap="follow">{{followed?'已收藏':'收藏'}}</view>
<view class="line"></view>
<view class="desc">{{shop.desc}}</view>
</view>
<view class="content-container">
<scroll-view class="classify-container" scroll-y="true">
<view class="classify {{classifySeleted==classify.id?'active':''}}" wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" data-id="{{classify.id}}" bindtap="tapClassify">
<view class="name">{{classify.classifyName}}</view>
</view>
</scroll-view>
<scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
<view wx:for="{{goodsList}}" wx:for-item="classify" wx:key="id" id="{{classify.id}}">
<view class="title">{{classify.classifyName}}</view>
<view class="goods" wx:for="{{classify.goods}}" wx:for-item="id" wx:key="*this">
<image class="pic" src="{{goods[id].pic}}"></image>
<view class="name ellipsis">{{goods[id].name}}</view>
<view class="sold">月售{{goods[id].sold}}</view>
<view class="price">￥{{goods[id].price}}</view>
<view class="addCart" bindtap="tapAddCart" data-id="{{id}}">
<image src="/imgs/shop/plus.png"></image>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}">
<view class="mask" bindtap="hideCartDetail"></view>
<view class="list">
<view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id">
<view class="name ellipsis">{{goods[id].name}}</view>
<view class="total">￥{{goods[id].price*cart.list[id]}}</view>
<view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view>
<view class="num">{{num}}</view>
<view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view>
</view>
</view>
</view>
<view class="cart">
<view class="data" bindtap="showCartDetail">
<view class="icon">
<image src="/imgs/shop/cart.png"></image>
<view class="count">{{cart.count}}</view>
</view>
<view class="total">￥{{cart.total}}</view>
</view>
<form bindsubmit="submit" report-submit="true">
<!--<view formType="submit" class="submit">去结算</view>-->
<button class="yellow {{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}">去结算</button>
</form>
</view>
</view>
效果图：
三.我的
部分代码：
<!--index.wxml-->
<view class="container">
<view class="login-icon">
<image class="login-img" src="/imgs/index/lb.jpg"></image>
</view>
<view class="login-from">
<!--账号-->
<view class="inputView">
<image class="nameImage" src="/imgs/index/lb.jpg"></image>
<label class="loginLab">账号</label>
<input class="inputText" placeholder="请输入账号"
bindinput="phoneInput" />
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="/imgs/index/lb.jpg"></image>
<label class="loginLab">密码</label>
<input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />
</view>
<!--相关协议-->
<checkbox-group bindchange="bindAgreeChange">
<label class="weui-agree" for="weuiAgree">
<view class="weui-agree__text">
<checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{}}" />
<view class="weui-agree__checkbox-icon">
<icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
</view>阅读并同意
<navigator url=""class="weui-agree__link">《相关条款》</navigator>
</view>
</label>
</checkbox-group>
<!--按钮-->
<view class="loginBtnView">
<button class="loginBtn" type="primary" size="{{primarySize}}"
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"
bindtap="login">登录</button>
</view>
</view>
</view>
今天就分享到此，感谢预览~
有源码