vue类似外卖菜单滑动左侧小测单实时更新的效果

本实现引用了better-scroll这一移动端库

import BScroll from 'better-scroll'

菜单中使用动态绑定class

<li :key="index" class="menu-item " v-for="(foods,index) in goods" :class="{current:index===currentIndex}">

首先需要确定一些data数据

data () {return {scrollY:0,    //右侧滑动的y轴坐标(滑动过程实时变化)tops:[],      //所有右侧分类的li的top组成的数组(列表第一次显示后就不再变化 )}
}

这里创建页面滑动效果,在生命周期回调函数中执行,保证数据异步更新完成后才会进行页面的监听绑定,避免出现过早的绑定导致无法使用

mounted () {this.$store.dispatch('getShopGoods',()=>{   //数据更新后执行this._initScroll()    //滑动效果,与更新scrollY的值this._initTops() //更新top的值})
}

下面是上述两个函数的实现

_initScroll(){this.$nextTick(()=>{        //列表数据更新后执行new BScroll('.menu-wrapper',{})const foodsSCroll = new BScroll('.foods-wrapper',{probeType:2 //绑定监听的配置:2在这里比较合适})foodsSCroll.on('scroll',({x,y})=>{this.scrollY = Math.abs(y)  //因为y轴下拉是负数,所以这里取绝对值})//绑定滚动结束监听foodsSCroll.on('scrollEnd',({x,y})=>{this.scrollY = Math.abs(y)})})
},

 _initTops(){let tops = []// 初始化topslet top = 0tops.push(top)  //因为初始值为0,所以我们这里将0先放进去//得到所有分类的liconst lis = this.$refs.foodsUL.getElementsByClassName('food-list-hook')Array.prototype.slice.call(lis).forEach(li =>{top+= li.clientHeighttops.push(top)})this.tops = tops //更新数据}
}

//计算得到当前分类的下标
currentIndex(){const {scrollY,tops} = this  //得到条件数据const index =  tops.findIndex((top,index)=> {//根据条件计算产生一个结果return top<=scrollY && tops[index+1]>scrollY//因为是因为滑动而菜单更新,所以我们要保证我们的滑动距离在某个菜单的区间之内})return index   // 返回结果
}

这样,基本的子菜单滚动更新主菜单就实现了

vue类似外卖菜单滑动左侧小测单实时更新的效果相关推荐

Android模仿QQ的左右滑动切换界面和下拉更新的效果
转自http://www.linuxidc.com/Linux/2012-08/67207.htm 主布局main.xml <?xml version="1.0" encod ...
微信小程序echarts实时更新
最近遇到了一个需求,就是要在小程序中实时刷新图表,最开始选择的是wx-chart,然后发现不能满足我的需求,最后选择了ECharts,也踩了一些坑,通过在网上收集资料,终于弄出来了,记录下我实现的过程 ...
vue列表左右箭头滑动_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
模仿QQ的左右滑动切换界面和下拉更新的效果
1.首先看看布局主布局main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
android小部件如何实时更新,android – 使用AlarmManager手动更新小部件
如 Android Dev Guide中所述,如果您希望窗口小部件更频繁地更新,则应使用AlarmManager设置不唤醒设备的警报. 原则上:不要使用AppWidgetProvider类提供的标准机 ...
H5 小代码（实时更新）
:before {content:'';display: inline-block;vertical-align: middle;height:100%; } ↑ 自适应垂直居中 .clearfix ...
中餐菜单分类名称创意_外卖运营小知识：优化外卖菜单，挽回店铺亏损
出现这些问题,很多老板都会在平台活动.运营等方面找原因,但你有没有想过可能是你的外卖菜单出了问题. 优质的外卖菜单,不仅代表了良好的第一印象.还能提高用户体验,促进菜品的销售. 但是外卖平台的菜单设计 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下. 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第 ...

vue类似外卖菜单滑动左侧小测单实时更新的效果

vue类似外卖菜单滑动左侧小测单实时更新的效果相关推荐

最新文章

热门文章