最近写了个微信小程序项目，一开始不理解scroll-view用法，用的另外一种方法写的，虽然实现了效果，但是代码层面来说，不大合理，后来又通过努力，用scroll-view实现了效果。现写个文章做个记录，方便自己和大家学习记录。
效果图请看第一张。布局：左右布局，右边又分为上下布局。
左侧是一级菜单，即为商品大类。
右上方二级菜单，是每个商品大类对应的子类，当点击左侧大类的时候，右上的子类是对应的变化。
右下方是商品数据，即每个二级菜单对应的商品数据。右下方粉色加粗的部分是每个商品所属的子类标题。
不会弄动图，我就叙述一下完整的效果是：点击左侧第二个大类，展示对应的子类，默认是高亮第一个子类，如果点击右上方对应的子类有黑色高亮效果，并且右侧下方的商品滚动到该子类对应商品的位置。如果滚动右侧下方的商品数据，右侧上方的对应子类会高亮，对应的大类也会高亮。
为了避免点击右上方二级分类的时候反复调接口的操作，所以后台将所有的数据一次性返回给我。该页面初始化加载数据只调用一次接口。然后前端自己将数据处理之后使用。
数据格式大致如下所示：
classifyData: [{
id:11,
groupName: "大类1",
children: [
{
id:1,
groupName:'子类1-1',
goodsSalesList:[
{salesId: "101",salesName:'订单1-1'},
{salesId: "102",salesName:'订单1-2'},
]
},
{
id:2,
groupName:'子类1-2',
goodsSalesList:[
{salesId: "201",salesName:'订单2-1'},
{salesId: "202",salesName:'订单2-2'},
]
}
],
},{
id:22,
groupName: "大类2",
children: [
{
id:3,
groupName:'子类2-1',
goodsSalesList:[
{salesId: "301",salesName:'订单3-1'},
{salesId: "302",salesName:'订单3-2'},
]
},
{
id:4,
groupName:'子类2-2',
goodsSalesList:[
{salesId: "401",salesName:'订单4-1'},
{salesId: "402",salesName:'订单4-2'},
]
}
],
},{
id:33,
groupName: "大类3",
children: [
{
id:5,
groupName:'子类3-1',
goodsSalesList:[
{salesId: "501",salesName:'订单5-1'},
{salesId: "502",salesName:'订单5-2'},
]
},
{
id:4,
groupName:'子类2-2',
goodsSalesList:[]
}
],
},
],页面template代码如下：
<template>
<view class="content">
<view class="ld">
<view class="left">
<view v-for="(item,index) in classifyData" :key="index" @click="setid(index)"
:class="classifyDataIndex==index?'active':'activeDefault'">
{{item.groupName}}
</view>
</view>
<view class="right">
<view class="stickyBox">
<view class="beforeActive" style="display: flex;justify-content: center;">
<template v-for="(items,index) in classifyData[classifyDataIndex].children" :key="index">
<view class="categoryName" @click="classifyActive(index,$event,items,classifyDataIndex)"
:class="activeClassify == index ? 'activeClass':'categoryName'" style="margin: 0 10px ;">{{items.groupName}}
</view>
</template>
</view>
</view>
<scroll-view :scroll-y="true" style="white-space: nowrap;height: 200px;" :scroll-into-view="clickId"
:scroll-with-animation="true" @scroll="scroll" @scrolltolower="scrolltolower ">
<template v-for="(classifyDataModel,classifyDataIndex) in classifyData" :key="classifyDataIndex">
<view class="" v-for="(item,index) in classifyDataModel.children" :key='index' :class="classifyData.length==classifyDataIndex+1&&classifyDataModel.children.length==index+1?'classifyDataMinHeght':''">
<view class="title" :id="'Index_'+classifyDataIndex+'_'+index">
<view class="">- {{item.groupName}} -</view>
</view>
<template v-if="item.goodsSalesList.length!=0">
<view class="" v-for="(dd,ee) in item.goodsSalesList" :key='ee' style="padding:30px 0;">
{{dd.salesName}}
</view>
</template>
<template v-else>
<view class="goods-details-box2" style="padding:30px 0;">暂无商品</view>
</template>
</view>
</template>
</scroll-view>
</view>
</view>
</view>
</template>页面script代码如下：文章来源：https://www.toymoban.com/news/detail-630119.html
<script>
export default {
data() {
return {
classifyData: [//数据格式
{
id:11,
groupName: "大类1",
children: [
{
id:1,
groupName:'子类1-1',
goodsSalesList:[
{salesId: "101",salesName:'订单1-1'},
{salesId: "102",salesName:'订单1-2'},
]
},
{
id:2,
groupName:'子类1-2',
goodsSalesList:[
{salesId: "201",salesName:'订单2-1'},
{salesId: "202",salesName:'订单2-2'},
]
}
],
},{
id:22,
groupName: "大类2",
children: [
{
id:3,
groupName:'子类2-1',
goodsSalesList:[
{salesId: "301",salesName:'订单3-1'},
{salesId: "302",salesName:'订单3-2'},
]
},
{
id:4,
groupName:'子类2-2',
goodsSalesList:[
{salesId: "401",salesName:'订单4-1'},
{salesId: "402",salesName:'订单4-2'},
]
}
],
},{
id:33,
groupName: "大类3",
children: [
{
id:5,
groupName:'子类3-1',
goodsSalesList:[
{salesId: "501",salesName:'订单5-1'},
{salesId: "502",salesName:'订单5-2'},
]
},
{
id:4,
groupName:'子类2-2',
goodsSalesList:[]
}
],
},
],
clickId: "",
classifyDataIndex: 0,//默认展示的大类下标
activeClassify:0,//默认展示的子类下标
RightTopArr:[],
}
},
onReady() {
this.getList(); //初始化加载
this.getNodesInfo();
},
onLoad() {
},
methods: {
getList() {},//此处调接口拿到数据并自行处理
setid(i) {//点击大类
this.classifyDataIndex = i;
this.activeClassify=0;//子类状态
this.clickId ='Index_'+i+'_'+0
},
classifyActive(index, event, items,classifyDataIndex){//点击子类
this.classifyDataIndex=classifyDataIndex;//大类状态与下标一致
this.activeClassify=index;//子类状态
this.clickId='Index_'+this.classifyDataIndex+'_'+this.activeClassify;
},
scroll(e) {//右侧商品滚动
let scrollTop = e.target.scrollTop;
console.log(scrollTop,'scrollTop')
for(let index in this.RightTopArr){
let data=this.RightTopArr[index];
if(e.target.scrollTop>=data.height && index==this.RightTopArr.length-1?true:e.target.scrollTop <this.RightTopArr[parseInt(index)+1].height){
let myArrData =data.id.split("_");
this.classifyDataIndex=myArrData[1];
this.activeClassify=myArrData[2];
return ;
}
}
},
getNodesInfo() {//滚动的距离
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
// 获取节点的位置信息
selectorQuery.selectAll('.title').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if (!rects.length) {
setTimeout(() => {
this.getNodesInfo();
}, 10);
return;
}
// 生成之后开始添加进去数组
rects.forEach((rect) => {
console.log(this.RightTopArr,'this.RightTopArr')
let tops=rect.top - rects[0].top;// 这里减去rects[0].top，是因为第一项顶部不是贴到导航栏=>每一个商品距离顶部的高度，如果此页面顶部没有其他的view那就不用减去rects[0].top，自己视情况而定。
this.RightTopArr.push({height:tops,id:rect.id});
resolve();
})
}).exec()
})
},
// 滚动到底部/右边，会触发 scrolltolower 事件
scrolltolower() {
setTimeout(() => {
// this.classifyDataIndex = this.classifyData.length;
console.log('滚动到底部了')
}, 10)
},
}
}
</script>样式代码如下：文章来源地址https://www.toymoban.com/news/detail-630119.html
<style lang="scss" scoped>
.stickyBox {
width: 80%;
display: flex;
background-color: #FFFFFF;
.beforeActive {
width: 600rpx;
height: 85rpx;
overflow: hidden;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.categoryName {
margin: 20rpx;
padding: 10rpx;
background-color: #E5E5E5;
height: 30rpx;
font-size: 20rpx;
font-weight: 400;
line-height: 28rpx;
color: #333333;
opacity: 1;
}
.activeClass {
margin: 20rpx;
padding: 10rpx;
background-color: #333333;
height: 30rpx;
font-size: 20rpx;
font-weight: 400;
line-height: 28rpx;
color: #FFFFFF;
opacity: 1;
}
}
.active {
width: 600rpx;
height: auto;
overflow: visible;
display: flex;
justify-content: flex-start;
}
}
.ld {
display: flex;
border: 1px solid black;
.left {
width: 100px;
text-align: center;
border-right: 1px dashed #007AFF;
}
.right {
flex: 1;
padding-left: 10px;
}
}
.title {
font-size: 20px;
font-weight: bold;
background-color: pink;
}
.activeDefault{
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active {
background-color: darkgoldenrod;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
justify-content: center;
}
.classifyDataMinHeght{
min-height: 100vh;
}
</style>到了这里，关于微信小程序 uniapp 电商项目使用scroll-view实现左右菜单联动，点击菜单子分类联动对应商品的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
