微信小程序如何实现商品数据联动效果(微信小程序,开发技术)

希望大家仔细阅读，能够学有所成！

微信小程序实现商品数据联动

js部分：

//pages/demo1/demo1.js
//存放右侧分类的高度累加数组
varheightList=[];
//记录scroll-view滚动过程中距离顶部的高度
vardistanceToTop=0;
Page({
/
页面的初始数据
/
data:{
curActive:0,//当前选中项
productList:[{
cname:'新鲜水果',
list:[{
id:0,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj!!0-saturn_solar.jpg468x468q75.jpg.webp',
goodsName:'樱桃'
},
{
id:1,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:2,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:3,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:4,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:5,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:6,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
{
id:7,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'荔枝'
},
]
},
{
cname:'海鲜水产',
list:[{
id:0,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj!!0-saturn_solar.jpg468x468q75.jpg.webp',
goodsName:'鲍鱼'
},
{
id:1,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
{
id:2,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:3,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:4,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:5,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:6,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:7,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:8,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
]
},
{
cname:'测试数据1',
list:[{
id:0,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj!!0-saturn_solar.jpg468x468q75.jpg.webp',
goodsName:'鲍鱼'
},
{
id:1,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
{
id:2,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:3,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:4,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:5,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:6,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:7,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:8,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
]
},
{
cname:'测试数据2',
list:[{
id:0,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj!!0-saturn_solar.jpg468x468q75.jpg.webp',
goodsName:'鲍鱼'
},
{
id:1,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
{
id:2,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:3,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:4,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:5,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:6,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:7,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},{
id:8,
img:'https://img.alicdn.com/imgextra/i4/615340156/O1CN0117eRFg1D1UYcEhmXj_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
goodsName:'鲍鱼'
},
]
}
]
},
/
左侧:菜单事件
@param{}e
/
selectMenu(e){
letindex=e.currentTarget.dataset.index;
this.setData({
curActive:index,
toView:"nav"+index
})
},
/*
获取商品列表高度
计算右侧商品某分类的高度
/
getProListHeight(){
lettmpHeightList=[];
lettmpH=0;//临时存放每个分类的高度
//获取元素信息返回一个SelectorQuery对象实例
constquery=wx.createSelectorQuery()
query.selectAll('.product').boundingClientRect()
query.exec(function(res){
res[0].forEach((item)=>{
tmpH+=item.height;
//Math.floor()向下取整【根据个人需要修改】
tmpHeightList.push(Math.floor(tmpH));
})
heightList=tmpHeightList;
console.log(heightList);
})
},
/
监听滚动时触发事件
@param{}e
/
scroll(e){
if(heightList.length==0)return;
letscrollTop=e.detail.scrollTop;//滚动位置
letcurrent=this.data.curActive;
console.log('scrollTop======>',scrollTop);
if(scrollTop>distanceToTop){
//如果右侧可视区域的竖直滚动位置超过当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
if((current+1<heightList.length)&&(scrollTop>=heightList[current])){
this.setData({
curActive:current+1
})
}
}else{
//如果右侧可视区域的竖直滚动位置小于当前列表选中的项距顶部的高度，则更新左侧选中项
if((current-1>=0)&&(scrollTop<heightList[current-1])){
this.setData({
curActive:current-1
})
}
}
//更新顶部的距离
distanceToTop=scrollTop;
},
/
生命周期函数--监听页面加载
/
onLoad:function(options){
//获取商品列表高度
this.getProListHeight();
},
/*
生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
},
/*
生命周期函数--监听页面显示
*/
onShow:function(){
},
/*
生命周期函数--监听页面隐藏
*/
onHide:function(){},
/*
生命周期函数--监听页面卸载
*/
onUnload:function(){
},
/*
页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
console.log('触发下拉')
},
/*
页面上拉触底事件的处理函数
*/
onReachBottom:function(){
console.log('触发上拉触底')
},
/*
用户点击右上角分享
*/
onShareAppMessage:function(){}
})

然后是wxml部分：

<viewclass="title">商品数据联动</view>
<viewclass="box">
<viewclass="left">
<scroll-viewscroll-y="true"scroll-with-animation="true"class="container">
<viewclass="menu-item{{index==curActive?'active':''}}"wx:for="{{productList}}"data-index="{{index}}"wx:key="index"bindtap="selectMenu">
{{item.c_name}}
</view>
</scroll-view>
</view>
<viewclass="right">
<scroll-viewscroll-y="true"scroll-with-animation="true"bindscroll="scroll"scroll-into-view="{{toView}}">
<blockwx:for="{{productList}}"wx:key="*this">
<!--id：实现点击左侧某分类时，右侧滚动至相应位置（注意：id不能以数字开头）-->
<viewid="nav{{index}}"class="product">
<viewclass="c_name">{{item.c_name}}</view>
<viewclass="goods-box">
<viewclass="goods-item"wx:for="{{item.list}}"wx:for-item='items'wx:key="index">
<imageclass="goods-img"src="{{items.img}}"mode="aspectFit"></image>
<viewclass="goods-name">{{items.goodsName}}</view>
</view>
</view>
</view>
</block>
<viewclass="bottom">到底了~没有更多了</view>
</scroll-view>
</view>
</view>

然后是css部分：

.title{
text-align:center;
margin-top:30px;
}
.box{
width:100%;
height:400px;
display:flex;
}
.left{
width:80px;
display:inline-block;
}
.right{
flex:1;
background:#ccc;
}
.container{
width:100%;
height:400px;
background-color:gray;
padding:0;
}
.menu-item{
width:100%;
height:50px;
border-bottom:1pxsolid#000;
background-color:pink;
line-height:50px;
text-align:center;
}
.active{
background-color:red;
}
.c_name{
width:100%;
text-align:center;
padding-top:20px;
}
.goods-box{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
}
.goods-item{
width:80px;
height:100px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.goods-img{
width:50px;
}
.bottom{
width:100%;
height:60px;
text-align:center;
line-height:80px;
font-size:10px;
color:rgb(139,135,135);
}