先看下静态效果图
image.png
废话不多说,直接上代码,分步骤:
先上DOM,这里用到了vant的tabs和sidebar
<!-- tab -->
<van-tabs v-model="active" sticky color='#2395ff' line-width='25'>
<van-tab title="点餐">
<div class="contents" :style="obj">
<!-- 分类列表 -->
<div class="menu-wrapper" ref="menuScroll">
<van-sidebar v-model="activeKey">
<van-sidebar-item :title="item.name" v-for="(item,index) in goods" :key="index" @click="selectMenu(index)" />
</van-sidebar>
</div>
<!-- 商品列表 -->
<div class="foods-wrapper" ref="foodScroll">
<ul>
<!-- 具体分类 -->
<li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
<h3 class="title">{{item.name}}</h3>
<!-- 具体的商品列表 -->
<ul>
<li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
<div class="icon" :style="head_bg(food.picture)"></div>
<div class="content">
<h3 class="name">{{food.name}}</h3>
<p class="desc" v-if="food.description">{{food.description}}</p>
<div class="extra">
<span class="saled">{{food.month_saled_content}}</span>
<span class="praise">{{food.praise_content}}</span>
</div>
<p class="price">
<span class="text">¥{{food.min_price}}</span>
<span>
<van-icon name="add" @click.stop="hanldeAdd(food)" color="#2396ff" size="24" />
</span>
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</van-tab>
<van-tab title="评价">评价 2</van-tab>
<van-tab title="商家">商家 3</van-tab>
</van-tabs>
data() {
return {
activeKey: 0,
active: 0,
obj: {
height: ''
},
goods: [
{
"name": "热销",
"icon": "http://p1.meituan.net/xianfu/10ba72e043ef4eca806cafb1a90a22662048.png",
"spus": [
{
"id": 216599656,
"name": "脆香油条",
"min_price": 5.5,
"praise_num": 3,
"praise_content": "赞3",
"tread_num": 0,
"praise_num_new": 3,
"unit": "例",
"description": "",
"picture": "https://cube.elemecdn.com/0/f5/df7d06f23c7651c011534d219a561jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_210,h_210/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp ",
"month_saled": 154,
"month_saled_content": "月售154",
"status": 0,
"status_description": "",
"product_label_picture": "",
"rating": {
"comment_count": 0,
"title": "外卖评价",
"snd_title": "暂无",
"praise_friends": "",
"like_ratio_desc": "好评度",
"like_ratio": "100%",
"filter_type": 1,
"comment_list": []
}
}, {
"id": 96985579,
"name": "麦辣鸡翅2块",
"min_price": 11,
"praise_num": 22,
"praise_content": "赞22",
"tread_num": 0,
"praise_num_new": 22,
"unit": "例",
"description": "",
"picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png",
"month_saled": 948,
"month_saled_content": "月售948",
"status": 3,
"status_description": "非可售时间",
"product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
"rating": {
"comment_count": 4,
"title": "外卖评价",
"snd_title": "4条
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。