vue侧边导航页面效果

左边是侧边导航的效果，右边是展示内容的小组件。

展示动图如下：

点击左边的导航，右边展示相对应的区域；
滑动右边，左边也会同步。
左侧的导航可以下拉，点击右边内容区域左边的导航不会上下移动。
引入了jquery 库。
关键代码：

mounted(){var vm = this;$('#content').scroll(function(e){let scrollTop = e.target.scrollTop;let index  =  scrollTop/221;  //221 是右边每个item项的高度console.log(index)vm.selectedIndex = Math.floor(index/0.77); // 0.77 数字大小自己决定 ，试验几次就能得到自己想要的效果。})},

子组件
完整代码


<template><div class="container"><div class="flex-wrap"><div class="leftnav-wrap"><ul class="nav-list"><li :class="{'nav-li':true,'orange':isActive(index)}" v-for="(item,index) in navdetail"  @click="activeItem(index)" :index="index">{{item.text}}</li></ul></div><!-- 具体展示文字区域 --><div id="content" ref="content"><ul class="goods-detail"><li class="goods-li" v-for="(item,index) in navdetail"><img :src="item.imgurl"><h1><a :name="item.text">{{item.text}}</a></h1></li></ul></div></div></div></template><script>export default{data(){return{selectedIndex:''}},mounted(){var vm = this;$('#content').scroll(function(e){let scrollTop = e.target.scrollTop;let index  =  scrollTop/221;console.log(index)vm.selectedIndex = Math.floor(index);})},props:['navdetail'],methods:{//获取点击的索引值activeItem(index){this.selectedIndex = index;let scrollTop = index *221;this.$refs.content.scrollTop = scrollTop;},//等于索引值的元素置为激活状态isActive(index){if(index == this.selectedIndex){return true}else{return false}},}}
</script>
<style>
html,body{overflow-x: hidden;
}ul{list-style: none;padding: 0;margin: 0
}
a{text-decoration: none;
}
#content{overflow-y: auto;width: calc(100% - 100px);height: 100%;}
.leftnav-wrap{width: 100px;overflow-y:auto;
}
.nav-list{width: 100px;margin-bottom:60px;}.orange{border-bottom:2px solid orange!important;
}
.nav-li{border-bottom: 2px solid #ccc;height: 120px;line-height: 120px;color: #333;}
::-webkit-scrollbar{display: none;
}
.flex-wrap{display: flex;position: fixed;width: 100%;height: 100%;
}
.goods-detail{margin-bottom:100px;}
.goods-li img{width: 160px;
}
</style>

父组件的代码:

<template><div><div class="wrap"><leftnav :navdata="navdata" :navdetail="navdetail"></leftnav></div></div>
</template>
<script>
import leftnav from '@/components/leftnav.vue'export default{data(){return{navdata:[{name:'女装'},{name:'男装'},{name:'日化'},{name:'生活用品'},{name:'鞋子'},{name:'iphone11'},{name:'iphone12'},{name:'华为'},{name:'一加'},{name:'锤子'},{name:'小米'},{name:'一加'},{name:'锤子'},{name:'小米'}],navdetail:[{text:'ysl',imgurl:'https://img13.360buyimg.com/babel/s320x320_jfs/t1/189523/38/7470/326286/60c1bc7aE1f9209af/f32040006b5beb82.jpg'},{text:'纪梵希',imgurl:'https://img13.360buyimg.com/babel/s320x320_jfs/t1/6832/37/15374/465669/60c2ba79Ec7964188/60ff7d7a4b95f1f2.jpg'},{text:'iphone11',imgurl:'https://img10.360buyimg.com/n7/jfs/t1/181147/16/6648/192505/60b4db17E96972480/b658977c7b38fb68.jpg'},{text:'iphone12',imgurl:'https://img10.360buyimg.com/n7/jfs/t1/189891/24/7842/154787/60c421f8E4ac1a09c/cf81506219325555.jpg'},{text:'vivo',imgurl:'https://img13.360buyimg.com/n2/jfs/t1/172981/8/14398/85423/60c332b5E6b9c3a58/28250f4f14662473.jpg'},{text:'华为手机',imgurl:'https://img14.360buyimg.com/n7/jfs/t1/174404/9/13484/206724/60c1d475E3d643be5/9411b9c3d17a60ca.jpg'}]}},components:{leftnav},methods:{}}
</script>

vue侧边导航页面效果相关推荐

android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选 ...
jQuery实现侧边导航手风琴效果
侧导航的手风琴效果是指,点击含子层导航的父导航时,使原本隐藏的子导航显示,再次点击,子层导航又恢复隐藏,同时,同一时间只有一个父导航的子导航能够显示 $("#sidenav > li& ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue + elementui 实现动态侧边导航栏
vue + elementui 实现动态侧边导航栏引言 router 文件夹创建 layout 文件夹 components 创建 SubMenu 文件夹封装动态侧边栏 vuex 中根据权限动态获 ...
php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...

vue侧边导航页面效果

左边是侧边导航的效果，右边是展示内容的小组件。

vue侧边导航页面效果相关推荐

最新文章

热门文章