基于vue2实现的外卖app----better-scroll列表左右联动

1、页面

2、接口

3、UI组件

• VantUI
  • https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

4、滚动插件better-scorll

https://better-scroll.github.io/docs-v1/doc/zh-hans/

5、新写项目

开发工具：vscode，webstorm

浏览器：谷歌浏览器

开发环境：node.js

5-1、搭建项目

• 全局安装脚手架
• 创建项目
  • router
  • vuex
• 开发

6、项目

6-1、创建项目

vue create 项目名

6-2、初始化项目的目录结构

6-3、规划页面

• 一级页面
  • 首页
  • 商品详情页
• 二级页面
  • 商品
  • 评价
  • 商家

6-4、新建页面和配置路由

• 建
• 配
• 给出口并测试
• 给导航

6-5、开发

6-5-1、重置样式

• 建一个reset或者normal的重置样式文件
• 在main.js中引入

6-5-2、下载安装UI组件库

• 下载安装
• 引入
• 使用

6-5-3、写静态页面

6-5-4、发送请求拿数据

• 需要axios
• 请求数据回填显式

6-6、better-scroll

• 下载安装

npm install better-scroll@1.11.1

• 引入

import BScroll from "better-scroll"

• 使用

 this.betterScroll = new BScroll(".goods-rigth")

6-6-1、左联右

// 点击左侧导航
    sideBarClick(index) {
      console.log(index);
      // 通过索引获取右侧的目标元素
      // 不能用querySelector去获取元素，因为querySelector不支持数字的形式获取元素
      let targetEl = document.getElementById(index + "");
      this.betterScroll.scrollToElement(targetEl, 500);
    },

6-6-2、右联左

• 监听右侧是滚动，并拿到y轴滚动的距离
• 判断滚动到哪一个范围

this.betterScroll.on("scroll", ({ y }) => {
   let _y = Math.abs(y);
      this.getPoint.forEach((item) => {
      	if (_y >= item.start && _y < item.end) {
          this.activeKey = item.id;
       	}
    });
});

• 计算范围

 computed: {
    getPoint() {
      // 获取盒子高度
      let arrH = [];
      this.goodsList.forEach((item, index) => {
        let h = document.getElementById(index + "").offsetHeight;
        arrH.push(h);
      });
      let newArr = [];
      let total = 0;
      arrH.forEach((heigth, index) => {
        let obj = {
          start: total,
          end: total + heigth,
          id: index,
        };
        newArr.push(obj);
        total += heigth;
      });
      console.log(newArr);
      return newArr;
    },
  },