仿淘宝菜单栏左右滑动（VUE 移动端）

可通过左右滑动上方的结构来实现下方滑块的跟随移动；
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用
具体效果：

HTML

*使用两个数组分为上下两行单个盒子设置固定宽度（以便后面进行计算）在包裹这两行数组的最外层盒子“menuItemsNav”添加 @scroll="scrollEvent 事件
*如果后台返回的是一个数组，可以根据下标奇、偶数来划分为两个数组

<!-- 菜单分类 -->  <div class="menuItems"><div style="overflow: hidden;"><div class="menuItemsNav" ref="menuItemsNav" @scroll="scrollEvent"><div class="menuItemsNav_1"><div class="menuItemsNav_1Dv" v-for="(item , index) in nav_list.oneList" :key="index" @click="menuNav_1(item , index)"><img src="../assets/image/02.png" alt="" /><span>{{item.name}}</span></div></div><div class="menuItemsNav_2"><div class="menuItemsNav_1Dv" v-for="(item , index) in nav_list.twoList" :key="index" @click="menuNav_2(item , index)"><img src="../assets/image/02.png" alt="" /><span>{{item.name}}</span></div></div></div></div><div v-if="slideShow" class="menuItemsBottom"><div class="menuItemsBottomBig"><div class="menuItemsBottomSmall" :style="{'margin-left':Left <= 0? 0:Left+'rem' , 'width':showSmallLength<=0?'100%':showSmallLength+'rem'}"></div></div></div></div>

CSS
*设置两个数组外层包裹的盒子“menuItemsNav ”属性为 overflow-x: scroll;固定宽度；

/* 菜单分类 */.menuItems {width: 13.829rem;height: 6.213rem;background: #fff;margin-top: 1.808rem;margin-bottom: 0.553rem;border-radius: 0.212rem;padding: 0.425rem 0.638rem;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}.menuItemsNav {width: 13.829rem;display: flex;flex-direction: column;overflow-x: scroll;padding-bottom: 0.638rem;}.menuItemsNav::-webkit-scrollbar {display: none}.menuItemsNav_1 {margin-bottom: 0.34rem;}.menuItemsNav_1,.menuItemsNav_2 {width: 13.829rem;display: -webkit-box;align-items: center;}.menuItemsNav_1Dv {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 2.7658rem;}.menuItemsNav_1Dv img {width: 1.829rem;height: 1.829rem;border-radius: 50%;}.menuItemsNav_1Dv span {color: rgba(117, 117, 117, 100);font-size: 0.51rem;margin-top: 0.17rem;}.menuItemsBottom {width: 100%;display: flex;justify-content: center;}.menuItemsBottomBig {width: 2.276rem;height: 0.127rem;border-radius: 0.382rem;background-color: rgba(224, 224, 224, 100);text-align: center;border: 0.021rem solid rgba(255, 255, 255, 100);overflow: hidden;}.menuItemsBottomSmall {top: 0;width: 0.876rem;height: 0.127rem;background-color: red;border-radius: 0.382rem;margin-left: 0.212rem;}

JS
*getRatio事件主要是获取滑块的宽度和滚动列表长度与滑条长度比例
*scrollEvent事件通过从getRatio事件获取到的比例值，得出滑块的向左偏移的距离通过绑定样式动态赋值上去:style="{‘margin-left’:Left <= 0? 0:Left+‘rem’}"

// 获取菜单栏的左右滚动距离
scrollEvent(e) {let that = this;let menuItemsNav = that.$refs.menuItemsNav;// menuItemsNav.scrollLeft 得到当前元素向左滚动了多少距离单位：PX   我这边根据我rem比例将距离转为了remlet menuItemsNavLeft = (menuItemsNav.scrollLeft / 47).toFixed(3)that.Left = menuItemsNavLeft * that.slideRatio;  // Left 就是margin-left所以要的数值
},
//根据分类获取比例 单个数组小盒子2.7658 滑块盒子：2.276  总宽：13.829 单位rem
getRatio() {let that = this;//这块的判断是当数组的个数没超过最外层元素的宽度时，，滑块隐藏 if (!that.nav_list.oneList || that.nav_list.oneList.length <= 5) {that.slideShow = false;} else {let _totalLength = that.nav_list.oneList.length * 2.7658; //分类列表总长度let _showLength = (13.829 / _totalLength * 2.276).toFixed(3); //动态显示当前滑条的宽度let _ratio = 2.276 / _totalLength * (15.957 / (document.body.clientWidth / 47).toFixed(3)); //滚动列表长度与滑条长度比例that.slideRatio = _ratio.toFixed(3)that.showSmallLength = _showLengththat.slideShow = true;}
}

仿淘宝菜单栏左右滑动（VUE 移动端）相关推荐

Andorid高仿淘宝商品详情滑动渐变标题栏
效果展示思路先看结构图,根据滑动距离计算alpha 最外层是一个 NestedScrollView,监听Y轴滑动距离. 长的是一个titleBar,背景为透明色,滑动过程中由透明色变为白色两边的 ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
Android仿淘宝、京东Banner滑动查看图文详情
文章目录写在前面效果图原理分析核心代码源码地址写在前面本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...
基于BootStrap仿淘宝星星商品评价案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

仿淘宝菜单栏左右滑动（VUE 移动端）

仿淘宝菜单栏左右滑动（VUE 移动端）相关推荐

最新文章

热门文章