双列商品分类页⾯——uview+uniapp实现（单向联动+双向联动）⼀个电商的app，商品的展⽰是必不可少的，联动分类展⽰是很常见的：
单向联动功能
实现效果：
1. 左侧是分类列表，有很多分类，可以滑动并点击
2. 右侧是该分类下的商品列表
3. 仅⽀持左侧点击后右侧内容改变，为单向联动展⽰
单向联动代码
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view":scroll-top="scrollTop">
<view v-for="(item,index) in tabbar":key="index"class="u-tab-item":class="[current==index ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view>
<block v-for="(item,index) in tabbar":key="index">
<scroll-view scroll-y class="right-box" v-if="current==index">
<view class="page-view">
<view class="class-item">
<view class="item-title">
<text>{{item.name}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.foods":key="index1">
<image class="item-menu-image":src="item1.icon" mode=""></image>
<view class="item-menu-name">{{item1.name}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
<script>
import classifyData from"@/common/classify.data.js";//是本地模拟的数据
export default{
data(){
return{
tabbar: classifyData,
scrollTop:0,//tab标题的滚动条位置
current:0,// 预设当前项的值
menuHeight:0,// 左边菜单的⾼度
menuItemHeight:0,// 左边菜单item的⾼度
}
},
methods:{
// 点击左边的栏⽬切换
async swichMenu(index){
if(index ==this.current)return;
this.current = index;
// 如果为0，意味着尚未初始化
uHeight ==0||uItemHeight ==0){
ElRect('menu-scroll-view','menuHeight');
ElRect('u-tab-item','menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index *uItemHeight +uItemHeight /uHeight /2;
},
// 获取⼀个⽬标元素的⾼度
getElRect(elClass, dataVal){
new Promise((resolve, reject)=>{
const query = ateSelectorQuery().in(this);
query.select('.'+ elClass).fields({size:true},res =>{
/
/ 如果节点尚未⽣成，res值为null，循环调⽤执⾏
if(!res){
setTimeout(()=>{
},10);
return;
}
this[dataVal]= res.height;
}).exec();
})
}
}
}
}
</script>
<style lang="scss" scoped>
.u-wrap {
height:calc(100vh);
/* #ifdef H5 */
height:calc(100vh -var(--window-top)); /* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding:18rpx 30rpx;
}
.u-menu-wrap {
flex:1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color:rgb(234,234,234);  border-radius:100rpx;
display: flex;
align-items: center;
padding:10rpx 16rpx;
}
.u-search-text {
font-size:26rpx;
color: $u-tips-color;
margin-left:10rpx;
}
.u-tab-view {
width:200rpx;
height:100%;
}
.u-tab-item {
height:110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size:26rpx;
color: #444;
font-weight:400;
line-height:1;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size:30rpx;
font-weight:600;
background: #fff;
}
.u-tab-item-active::before {
content:"";
position: absolute;
position: absolute;
border-left:4px solid $u-type-primary;  height:32rpx;
left:0;
top:39rpx;
}
.u-tab-view {
height:100%;
}
.right-box {
background-color:rgb(250,250,250); }
.page-view {
padding:16rpx;
}
.class-item {
margin-bottom:30rpx;
background-color: #fff;
padding:16rpx;
border-radius:8rpx;
}
.item-title {
font-size:26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size:24rpx;
color: $u-main-color;
borderbox
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width:33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top:20rpx;
}
.item-menu-image {
width:120rpx;
height:120rpx;
}
</style>
双向联动
实现效果：
1. 左侧是分类列表，有很多分类，可以滑动并点击
2. 右侧是该分类下的商品列表
3. 左侧点击时右侧展⽰对应分类的商品，右侧⽀持滑动，滑动时左侧分类也会相应改变
双向联动代码
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view":scroll-top="scrollTop"
:scroll-into-view="itemId">
<view v-for="(item,index) in tabbar":key="index"class="u-tab-item":class="[current == index ? 'u-tab-item-active' : '']"  @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
<view class="page-view">
<view class="class-item":id="'item' + index" v-for="(item , index) in tabbar":key="index">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。