vue项目实现商品分类双向联动【简洁易懂】

先上一张效果图给大家looklook

源码如下

<template>
<!-- OK OK --><div class="list"><!-- 头部==================================================================================== --><header><div class="returns" @click="goback"><i class="iconfont icon-fanhui"></i></div><div class="search"><i class="iconfont icon-fangdajing"></i><span>搜您喜欢的...</span></div><div class="go-home"><img src="@/assets/images/home.png" alt="" /></div></header><!-- 主体==================================================================================== --><section><!-- 左侧部分 --><div class="list-l" ref="left"><!-- {{currentIndex}} --><ul class="l-item"><li:class="{active:index==currentIndex}"v-for="(item, index) in leftData":key="index"@click="goScroll(index)">{{ item.name }}</li></ul></div><!-- 右侧部分 --><div class="list-r" ref="right"><div><!-- 记住！！！这里加一个div盒子，才能上下滑动，betterscroll才能生效 --><ul class="shop-list" v-for="(item, index) in rightData":key="index"><!-- {{item}} --><li v-for="(k, i) in item" :key="i"><!-- <h2>{{k}}</h2> k下面还有一个list数据，三级数据需要遍历循环 --><h2>{{ k.name }}</h2><ul class="r-content"><li v-for="(j, idx) in k.list" :key="idx" @click="goDetail(j.id)"><img :src="j.imgUrl" alt="" /><span>{{ j.name }}</span><!-- <h2>{{j.id}}</h2> --></li></ul></li></ul><div style="height:400px"></div></div></div></section><!-- 尾部==================================================================================== --><Tabbar></Tabbar></div>
</template><script>
import Tabbar from "../components/common/Tabbar.vue";
import http from "@/common/api/request.js";
import BetterScroll from "better-scroll"; //子元素高度比父元素高度要高，必须添加在mounted中export default {name: "List",components: { Tabbar },data() {return {leftData: [], //左侧的数据(一级的那一列的数据)rightData: [], //右侧的数据rightBScroll: "", //右侧滑动BScrollallHeight: [], //承载右侧每一块的高度值scrollY:""//右侧滚动距离};},async created() {//去请求接口 获取数据let res = await http.$axios({url: "/api/goods/list",});console.log("这里是List的res", res);let leftArr = [];//就是leftDatalet rightArr = [];//就是rightDatares.forEach((v) => {//循环res数组，然后拿出左边一级菜单的数据存到leftArr中leftArr.push({id: v.id,name: v.name,});rightArr.push(v.data);});console.log("这里是leftArr", leftArr);console.log("这里是rightArr", rightArr);this.leftData = leftArr;this.rightData = rightArr;//！！！当dom都加载完了再去执行！！！！！！！！！！！！！！！！！！！！！this.$nextTick(() => {// 左侧滑动new BetterScroll(this.$refs.left,{click:true,bounce:false//取消回弹效果});//better-scroll默认取消click事件// 右侧滑动        betterscroll默认取消scroll事件，probeType默认为0this.rightBScroll = new BetterScroll(this.$refs.right,{click:true,probeType:3,bounce:false//取消回弹效果});//配置probeType就可得到右侧滚动的值// 统计右侧所有板块高度值，并且放入数组中let height = 0;this.allHeight.push(height);// 获取右侧每一块高度let uls = this.$refs.right.getElementsByClassName("shop-list"); //1.这里是六个ulconsole.log("这里是List=>uls",uls);// 2.把dom对象(六个ul)转换成为真正的数组???????????????????????????Array.from(uls).forEach((v) => {// console.log("@@@@@v",v);// console.log("@@@@@v.clientHeight",v.clientHeight);//259  就是每个ul盒子的可视区域高度(height+padding，不包含边框)height += v.clientHeight; //clientheigh： 内容的可视区域，不包含borderthis.allHeight.push(height);console.log("List=>allHeight", this.allHeight);});// 得到右侧滚动的值this.rightBScroll.on("scroll",(pos)=>{// console.log("List=>pos",pos);//{例 x: 0, y: -399...}//y可以看出右边页面滚去多少距离console.log("pos.y=scrollY",pos.y);this.scrollY=Math.abs(pos.y)//abs返回一个数的绝对值})});},methods: {goback(){this.$router.back()},goScroll(index){// console.log("左边索引和右边allHeight",index,this.allHeight);this.rightBScroll.scrollTo(0,-this.allHeight[index],300)//300是时间},goDetail(id){this.$router.push({path:"/detail", //去到Detail页面就会把id=xxx传过去给Detail，就在导航栏路径上面可以看见idquery:{id:id}})}},computed:{currentIndex(){  //根据这个计算属性判断左边菜单哪个显示高亮return this.allHeight.findIndex((item,index)=>{ //返回满足条件的indexconsole.log("@",item,index);return this.scrollY>=item&&this.scrollY<this.allHeight[index+1]//???????????})}}
};
</script><style scoped lang="scss">.list {display: flex;flex-direction: column;width: 100vw;height: 100vh;// background-color: skyblue;overflow: hidden;
}
header {display: flex;justify-content: space-between;height: 1.1733rem;align-items: center;// background-color: #b0352f;background-color: red;.returns i {color: #fff;font-size: 0.72rem;}.search {display: flex;align-items: center;flex: 1;background-color: #ffffff;border-radius: 23px;padding: 0 10px;i {font-size: 18px;color: #666;padding-right: 0.16rem;}span {color: #666;font-size: 15px;padding: 4px 0;}}.go-home {padding: 0 0.2666rem;width: 40px;height: 40px;img {width: 100%;height: 100%;}}
}
section {display: flex;flex: 1;// background-color: red;overflow: hidden;
}
.list-l {width: 93px;background-color: #fff;overflow: hidden;border-right: 1px solid #cccccc;.l-item {display: flex;flex-direction: column;align-items: center;justify-content: center;li {width: 100%;margin: 0.5333rem 0;padding: 0.08rem 0;text-align: center;font-size: 15px;}}
}
.active {color: #b54f4a;border-left: 6px solid #b54f4a;
}
.list-r {flex: 1;overflow: hidden;// background-color: yellow;.shop-list {text-align: center;h2 {font-size: 0.64rem;font-weight: 400;padding: 0.5333rem 0;}.r-content {display: flex;flex-wrap: wrap;// justify-content: center;li {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px 0;width: 33.3%;img {width: 53px;height: 53px;}span {font-size: 16px;}}}}
}
::v-deep.tabbar {border-top: 1px solid #cccccc;
}
</style>

vue项目实现商品分类双向联动【简洁易懂】相关推荐

VUE下拉框双向联动
一.前言在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue ang ...
vue项目实现G6双向树状图最详细教程
在项目中使用 NPM 包引入 npm install --save @antv/g6 AntV G6 示例图初始化数据点击节点动态加入数据上代码(vue 文件) <template> ...
VUE项目实践1：设置编辑按钮，可保存，双向绑定
VUE项目实践:设置编辑按钮,可保存,双向绑定目录结构: 实现效果: 所有代码: 实现页面:ipobtion.vue 引用页面:index.vue 目录结构: 实现效果: ...
【VUE项目实战】41、添加商品分类功能（二）
接上篇<40.添加商品分类功能(一)> 上一篇我们实现了部分添加商品分类的功能,本篇我们来继续处理添加分类时表单相关的内容. 一.优化上一章剩余的小问题首先我们先处理一下选中之后想要清除 ...
vue实现商品分类左右联动
vue中better-scroll实现商品分类左右联动结合better-scroll插件实现商品分类左右联动交互方式. 文章目录 vue中better-scroll实现商品分类左右联动前提准备效 ...
【VUE项目实战】37、商品分类功能介绍和基本结构搭建
接上篇<36.用户分配角色功能> 上一篇我们完成了为用户分配角色的功能,结束了权限管理模块.本篇我们开启新模块"分类管理"的开发,先进行模块的介绍和基本结构的搭建. 一 ...
结合服务器+后端+前端，完成 vue项目后台管理系统
目录以上是项目的服务器php.后端.前端.已经可以正常运行一登录: 登录页进度条:戳这里Vue项目电商后台管理系统 nprogress--进度条_活在风浪里的博客-CSDN博客二侧导航三 ...
Vue 项目中各种痛点问题及方案
作者:愣锤原文:https://juejin.im/post/6844903632815521799 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中 ...
浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题基础优化所谓的基础优化是任何 web 项目都 ...

vue项目实现商品分类双向联动【简洁易懂】

vue项目实现商品分类双向联动【简洁易懂】相关推荐

最新文章

热门文章