Vue仿制外卖点餐界面的左右侧菜单联动：点击左侧使右侧滚动到对应位置，右侧滚动时选中左侧对应选项
Posted 老张在线敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue仿制外卖点餐界面的左右侧菜单联动：点击左侧使右侧滚动到对应位置，右侧滚动时选中左侧对应选项相关的知识，希望对你有一定的参考价值。
首先安装依赖
yarn add better-scroll
// better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写
yarn add stylus-loader@3.0.2 --save-dev
//使用模块化的方法去写css代码
示例图片
<template>
<div>
<div class="goods">
<div class="menu-wrapper">
<ul>
<li
class="menu-item"
v-for="(good, index) in goods"
:key="index"
:class=" current: index === currentIndex "
@click="clickMenuItem(index)"
>
<span class="text">
<img class="icon" :src="good.icon" v-if="good.icon" />
good.name
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul ref="foodsUl">
<li
class="food-list-hook"
v-for="(good, index) in goods"
:key="index"
>
<h1 class="title"> good.name </h1>
<ul>
<li
class="food-item"
v-for="(food, index) in good.foods"
:key="index"
>
<div class="icon">
<img width="57" height="57" :src="food.icon" />
</div>
<div class="content">
<h2 class="name"> food.name </h2>
<p class="desc"> food.description </p>
<div class="extra">
<span class="count">月售 food.sellCount 份</span>
<span>好评率 food.rating %</span>
</div>
<div class="price">
<span class="now">￥ food.price </span>
<span class="old" v-if="food.oldPrice"
>￥ food.oldPrice </span
>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default
data()
return
scrollY: 0, // 右侧滑动的Y轴坐标 (滑动过程时实时变化)
tops: [], // 所有右侧分类li的top组成的数组 (列表第一次显示后就不再变化)
goods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "优惠",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "瑶",
description: "公主",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "安琪拉",
description: "双马尾",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "折扣",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "小乔",
description: "扇子",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "王昭君",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
name: "法师",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "小乔",
description: "扇子",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "王昭君",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "王昭君",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "王昭君",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
name: "辅助",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "瑶",
description: "公主",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "蔡文姬",
description: "kkk",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "东皇",
description: "hhh",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "孙膑",
description: "666",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
name: "射手",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "伽罗",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "后裔",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "狄仁杰",
description: "hhh",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "公孙离",
description: "666",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
name: "打野",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "李白",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "百里玄策",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "韩信",
description: "hhh",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "孙悟空",
description: "666",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
name: "坦克",
foods: [
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "亚瑟",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "项羽",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "凯",
description: "hhh",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "夏侯惇",
description: "666",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "亚瑟",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "项羽",
description: "",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "凯",
description: "hhh",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
icon: "http://liangziqi.top/meme-img/126-430.jpg",
name: "夏侯惇",
description: "666",
sellCount: 1,
rating: 100,
price: 2,
oldPrice: "6",
,
],
,
],
;
,
mounted()
this.$nextTick(() =>
this._initScroll();
this._initTops();
);
,
computed:
// 计算得到当前分类的下标
currentIndex()
// 初始化和相关数据发生了变化时执行
// 得到条件数据
const scrollY, tops = this;
// 根据条件计算产生一个结果
const index = tops.findIndex((top, index) =>
// scrollY>=当前top && scrollY<下一个top
return scrollY >= top && scrollY < tops[index + 1];
);
// 返回结果
return index;
,
,
methods: 仿饿了点餐界面2个ListView联动
vue+better-scroll实现左右菜单联动效果（移动端）