VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现

使用插件Bscroll，在依赖文件package.json中添加版本，在install，run之后使用
1）import BScroll from

2)BScroll实例化的时候要接收一个DOM，此处将实例化并获取DOM的过程封装成方法,获取DOM

<div class="menu-wrapper" ref="menuWrapper">
<div class="foods-wrapper" ref="foodsWrapper">

methods: {_initScroll() {//v-el(this.$els.foodWrapper)获取DOM对象，json对象this.menuScroll = new BScroll(this.$refs.menuWrapper, {click: true //阻止默认，允许点击});this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {click: true,probeType: 3 //BScroll滚动时，能实时告诉我们滚动的位置，类似探针的效果});//foodsScroll监听事件,在scroll滚动时能见位置实时暴露出来this.foodsScroll.on('scroll', (pos) => {this.scrollY = Math.abs(Math.round(pos.y)); //取正值});}

在created中添加初始化，在this.$nextTick(() => {初始化})

 created() {this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];//请求的ajex地址,成功的回调，拿到一个responsethis.$http.get('/api/goods').then((response) => {//response是一个属性，将其转化为json对象response = response.body;//console.log(response);if (response.errno === ERR_OK) {// 数据在data字段中,将goods对象传给header组件，通过:goodsthis.goods = response.data;
//        console.log(this.goods);//初始化betterScroll的时候，DOM的更新时异步的,所以我们在这虽然改变了数据，但是DOM并没有变化，计算不到正确的高度this.$nextTick(() => {//调用scroll函数，实现滚动this._initScroll();//拿到数据以后计算高度this._calculateHeight();}); }});}

左右两侧都可以产生的滚动效果

3）滚动右侧时左侧相应滚动，计算右侧不同区间高度的一个数组，然后对比当前滑动的坐标落在哪个区间，并取到这个区间的索引值，就可以知道左侧导航栏要高亮的索引值了，利用vue的class绑定令其高亮

在data中定义数组用来存储不同区间的高度

data() {return {goods: [],listHeight: [] //存储区块的高度};
}

$%u963F%u8FBE%u7684$ 为了获取高度，给food-list定义一个class--food-list-hook，不用来编写css，专门用来获取DOM元素，没有实际的效果，只是用来被js选择的

<div class="foods-wrapper" ref="foodsWrapper"><ul><li v-for="item in goods" :key="item.id" class="food-list food-list-hook">

foodList拿到了每个li，每个li是包括包括标题在内的每一类food的高度，不是单独的一种good，将_calculateHeight放在nextTick中初始化_initScroll的后面，保证其能正确计算到高度

   _calculateHeight() {//food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');let height = 0;this.listHeight.push(height); //listHeight是一个递增的区间数组，是每个专区高度的累加for (let i = 0; i < foodList.length; i++) {let item = foodList[i];height += item.clientHeight;this.listHeight.push(height);}}

在data中定义一个scrollY对象，用来跟踪滚动的高度 scrollY：0；在初始化betterScroll时，为右侧添加probeType，可以检测到右侧实时滚动的位置，监听scroll，将其实时滚动的位置暴露出来

this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {click: true,probeType: 3 //BScroll滚动时，能实时告诉我们滚动的位置，类似探针的效果});//foodsScroll监听事件,在scroll滚动时能见位置实时暴露出来this.foodsScroll.on('scroll', (pos) => {this.scrollY = Math.abs(Math.round(pos.y)); //本身是个负值，取正值})

4）拿到滚动的高度和内容区的固定高度之后，查看scrollY落在哪个区间，并返回那个区间的索引（！height2是测试最后一个区间的）其中，>= 向下的是一个闭区间，这样第一个就会高亮了

computed: {currentIndex() { //currentIndex对应菜单栏的下标for (let i = 0; i < this.listHeight.length; i++) { //不要忘了加this引用let height1 = this.listHeight[i];let height2 = this.listHeight[i + 1];//获得了一个区间的上下范围，判断scrollY落到这个区间，!height2是判断最后一个区间//避免i溢出，>= 向下的是一个闭区间，这样第一个就会高亮了if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {return i; //映射到第5行menu的变化}}return 0;

拿到index之后，回到左侧的menu区，当我们遍历menu的时候，如果$index等于我们计算得到的currentIndex时，就为当前的li添加一个current样式

<!-- 如果index等于currentIndex,就为这个li添加一个current类，改变左侧导航栏的背景颜色--><li v-for="(item,index) in goods" :key="item.id" class="menu-item" :class="{'current': currentIndex === index}" @click = "selectMenu($index, $event)"> <!--  click所传递的事件-->

        &.currentposition relativemargin-top -1pxbackground #ffffont-weight 700z-index 10.textborder-none()

5）点击左侧右侧滚动
在左侧菜单栏添加点击事件selectMenu， @click = "selectMenu($index, $event)"，将index传进去，就可以知道点选的是哪个区域，然后利用原生DOM操作将高度滚动到相应的位置

点击左侧菜单栏的时候没有反应，因为BScroll默认阻止点击事件，所以在 _initScroll()中获取DOM对象时添加click: true,并解决PC端双点击问题，event是点击时的event

    selectMenu (index, event) {if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击return;}let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');let ref = foodList[index]; //取到index对应的DOMthis.foodsScroll.scrollToElement(ref, 300);//滚动到DOM所在位置//console.log(index);}

VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现相关推荐

安卓学习笔记3——登录界面UI
安卓学习笔记3--登录界面UI 一.登录界面UI 1.根据需求写UI 2.主活动 3.主活动调用的读写文件的工具类 4.效果展示二.总结与改进不足: 1.密码分割采用字符串:当密码和用户名包含该字 ...
Vue高仿饿了吗学习笔记
VUE高仿饿了么app 本项目github地址:https://github.com/motysla/eleme.git VUE 搭建简介刚学习了VUE高仿饿了么app课,记录课的要点,巩固知识. ...
vue高仿饿了么学习笔记（五）—— header 组件
先贴一张 header 的 UI 图一.header 组件 1)传入 seller 数据 // App.vue <template><div id="app"& ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
Vue.js入门（学习笔记）
说在前头: 本人为大三在读学生,书写文章的目的是为了对自己掌握的知识和技术进行一定的记录,同时乐于与大家一起分享,因本人资历尚浅,发布的文章难免存在一些错漏之处,还请阅读此文章的大牛们见谅与斧正.若在 ...
Vue.js 3.0 学习笔记（七）class与style绑定
一.绑定HTML样式(class) 1.数组语法 <!DOCTYPE html> <html> <head><meta charset="UTF-8 ...
Vue.js 3.0 学习笔记（三）指令
一.内置指令 1.v-show v-show指令会根据表达式的真假值,切换元素的display CSS属性,来显示或者隐藏元素.当条件变化时,该指令会自动触发过渡效果 <!DOCTYPE htm ...
VUE2.0 饿了么学习笔记（10）加减号组件cartcontrol
创建cartcontrol组件,组件关联到food的相关属性,价格,数量等,所以组件要props父组件goods传过来的food数据 export default {//父组件传过来的,接收一个pro ...

VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现

VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现相关推荐

最新文章

热门文章