微信小程序实现商品左右联动

scroll-view实现商品左右联动

scroll-view使用

可滚动视图区域。使用竖向滚动时&＃xff0c;需要给scroll-view一个固定高度&＃xff0c;通过 WXSS 设置 height。组件属性的长度单位默认为px

scroll-view文档

效果图

请忽略画质失真

注&＃xff1a; 以下商品图片用于测试&＃xff0c;如有侵权请通知&＃xff0c;会删除相关图片。

wxml

<view class&＃61;"productList"><view class&＃61;"menu-wrapper"><scroll-view scroll-y&＃61;"true" scroll-with-animation&＃61;"true"><view class&＃61;"menu-item {{index &＃61;&＃61; curActive ? &＃39;active&＃39; : &＃39;&＃39;}}" wx:for&＃61;"{{productList}}" wx:key&＃61;"index" bindtap&＃61;"selectMenu" data-index&＃61;"{{index}}"><view class&＃61;"name">{{item.c_name}}view>view>scroll-view>view><view class&＃61;"prodeuct-wrapper"><scroll-view scroll-y&＃61;"true" scroll-with-animation&＃61;"true" bindscroll&＃61;"scroll" scroll-into-view&＃61;"{{toView}}" style&＃61;"height: 100%"><block wx:for&＃61;"{{productList}}" wx:key&＃61;"id"><view id&＃61;"nav{{index}}" class&＃61;"product"><view class&＃61;"title">{{item.c_name}}view><view class&＃61;"goods-box"><view class&＃61;"goods-item" wx:for&＃61;"{{item.list}}" wx:for-item&＃61;&＃39;items&＃39; wx:key&＃61;"index"> <image class&＃61;"goods-img" src&＃61;"{{items.img}}" mode&＃61;"aspectFit">image><view class&＃61;"goods-name">{{items.goodsName}}view>view>view>view>block>scroll-view>view>
view>


js

由于在data中模拟数据测试的&＃xff0c;页面加载直接调用获取某个分类下商品高度。 那么根据实际需求&＃xff0c;在请求数据成功后&＃xff0c;调用即可。

const app &＃61; getApp()
var http &＃61; require(&＃39;../../../../utils/request.js&＃39;);
var that;
//存放右侧分类的高度累加数组
var heightList &＃61; [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop &＃61; 0;Page({/*** 页面的初始数据*/data: {curActive: 0, //当前选中项productList: [{c_name: &＃39;新鲜水果&＃39;,list: [{id: 0,img: &＃39;&＃39;,goodsName: &＃39;樱桃&＃39;},{id: 1,img: &＃39;&＃39;,goodsName: &＃39;荔枝&＃39;},]},{c_name: &＃39;海鲜水产&＃39;,list: [{id: 0,img: &＃39;&＃39;,goodsName: &＃39;鲍鱼&＃39;}]}]},/*** 生命周期函数--监听页面显示*/onLoad: function () {// 获取商品列表高度that.getProListHeight();},/*** 左侧: 菜单事件* &＃64;param {*} e */selectMenu (e) {let index &＃61; e.currentTarget.dataset.index;that.setData({curActive: index,toView: "nav"&＃43; index})},/*** 获取商品列表高度* 计算右侧商品某分类的高度*/getProListHeight () {let tmpHeightList &＃61; [];let tmpH &＃61; 0; //临时存放每个分类的高度// 获取元素信息 返回一个 SelectorQuery 对象实例const query &＃61; wx.createSelectorQuery()query.selectAll(&＃39;.product&＃39;).boundingClientRect()query.exec(function(res) {res[0].forEach((item) &＃61;> {tmpH &＃43;&＃61; item.height;// Math.floor()向下取整 【根据个人需要修改】tmpHeightList.push(Math.floor(tmpH));})heightList &＃61; tmpHeightList; //[386, 658, 930, 1202, ...]console.log(heightList);})},/*** 监听滚动时触发事件* &＃64;param {*} e */scroll(e) {if(heightList.length &＃61;&＃61; 0) return;let scrollTop &＃61; e.detail.scrollTop; //滚动位置let current &＃61; that.data.curActive;console.log(&＃39;scrollTop&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>&＃39;, scrollTop);if (scrollTop > distanceToTop) {//如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度&＃xff08;且没有下标越界&＃xff09;&＃xff0c;则更新左侧选中项if ((current &＃43; 1 < heightList.length) && (scrollTop >&＃61; heightList[current])) {that.setData({curActive: current &＃43; 1})} } else {//如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度&＃xff0c;则更新左侧选中项if ((current - 1 >&＃61; 0) && (scrollTop < heightList[current - 1])) {that.setData({curActive: current - 1})}}//更新顶部的距离distanceToTop &＃61; scrollTop;}
})


wxss

这里使用了scss声明一些变量和mixin&＃xff0c; 可根据自身要求修改

• wh&＃xff1a; 宽高&＃xff0c; sc&＃xff1a; 字体、颜色 &＃xff0c; fcc&＃xff1a; flex水平垂直居中&＃xff0c; borderRadius&＃xff1a; 圆角

.storeList {&＃64;include wh(100%, 100%);height: calc(100% - 66px);display: flex;position: absolute;overflow: hidden;box-sizing: border-box;background: #fff;.menu-wrapper {overflow: hidden;overflow-y: scroll;-webkit-overflow-scrolling:touch;background: #f8f8f8;&＃64;include wh(180rpx, 100%);flex: 0 0 180rpx;.menu-item {&＃64;include wh(100%, 100rpx);&＃64;include fcc;&＃64;include sc(26rpx, $fc);}.active {color: #fe2945;background: $white;}}.prodeuct-wrapper {flex: 1;height: 100%;.product {width: 100%;}.title {font-weight: bold;&＃64;include sc(30rpx, $fc);padding: 20rpx;}.goods-box {display: flex;flex-wrap: wrap;}.goods-item {width: calc(100% / 3);&＃64;include fc;flex-direction: column;margin-bottom: 30rpx;.goods-img {&＃64;include wh(150rpx, 150rpx);&＃64;include borderRadius(6rpx);}.goods-name {&＃64;include sc(24rpx, $fc);padding-top: 10rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: calc(100% - 40rpx);text-align: center;}}}
}
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}


数据结构效果图

临时测试数据&＃xff0c;仅供参考

感谢: 参考文章