scroll-view实现商品左右联动
scroll-view使用
可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px
效果图
请忽略画质失真
注: 以下商品图片用于测试,如有侵权请通知,会删除相关图片。
wxml
<view class="productList">
<!-- 左边菜单项 -->
<view class="menu-wrapper">
<scroll-view scroll-y="true" scroll-with-animation="true">
<view class="menu-item {{index == curActive ? 'active' : ''}}" wx:for="{{productList}}" wx:key="index" bindtap="selectMenu" data-index="{{index}}">
<view class="name">{{item.c_name}}</view>
</view>
</scroll-view>
</view>
<!-- 右边商品列表 -->
<view class="prodeuct-wrapper">
<scroll-view scroll-y="true" scroll-with-animation="true" bindscroll="scroll" scroll-into-view="{{toView}}" style="height: 100%">
<block wx:for="{{productList}}" wx:key="id">
<!-- id:实现点击左侧某分类时,右侧滚动至相应位置(注意:id不能以数字开头)-->
<view id="nav{{index}}" class="product">
<view class="title">{{item.c_name}}</view>
<view class="goods-box">
<view class="goods-item" wx:for="{{item.list}}" wx:for-item='items' wx:key="index">
<image class="goods-img" src="{{items.img}}" mode="aspectFit"></image>
<view class="goods-name">{{items.goodsName}}</view>
</view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
js
由于在
data
中模拟数据测试的,页面加载直接调用获取某个分类下商品高度
。 那么根据实际需求,在请求数据成功后,调用即可。
const app = getApp()
var http = require('../../../../utils/request.js');
var that;
//存放右侧分类的高度累加数组
var heightList = [];
//记录scroll-view滚动过程中距离顶部的高度
var distanceToTop = 0;
Page({
/**
* 页面的初始数据
*/
data: {
curActive: 0, //当前选中项
productList: [
{
c_name: '新鲜水果',
list: [
{
id: 0,
img: '',
goodsName: '樱桃'
},
{
id: 1,
img: '',
goodsName: '荔枝'
},
]
},
{
c_name: '海鲜水产',
list: [
{
id: 0,
img: '',
goodsName: '鲍鱼'
}
]
}
]
},
/**
* 生命周期函数--监听页面显示
*/
onLoad: function () {
// 获取商品列表高度
that.getProListHeight();
},
/**
* 左侧: 菜单事件
* @param {*} e
*/
selectMenu (e) {
let index = e.currentTarget.dataset.index;
that.setData({
curActive: index,
toView: "nav"+ index
})
},
/**
* 获取商品列表高度
* 计算右侧商品某分类的高度
*/
getProListHeight () {
let tmpHeightList = [];
let tmpH = 0; //临时存放每个分类的高度
// 获取元素信息 返回一个 SelectorQuery 对象实例
const query = 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; //[386, 658, 930, 1202, ...]
console.log(heightList);
})
},
/**
* 监听滚动时触发事件
* @param {*} e
*/
scroll(e) {
if(heightList.length == 0) return;
let scrollTop = e.detail.scrollTop; //滚动位置
let current = that.data.curActive;
console.log('scrollTop======>', scrollTop);
if (scrollTop > distanceToTop) {
//如果右侧 可视区域的竖直滚动位置 超过 当前列表选中项距顶部的高度(且没有下标越界),则更新左侧选中项
if ((current + 1 < heightList.length) && (scrollTop >= heightList[current])) {
that.setData({
curActive: current + 1
})
}
} else {
//如果右侧 可视区域的竖直滚动位置 小于 当前列表选中的项距顶部的高度,则更新左侧选中项
if ((current - 1 >= 0) && (scrollTop < heightList[current - 1])) {
that.setData({
curActive: current - 1
})
}
}
//更新顶部的距离
distanceToTop = scrollTop;
}
})
wxss
这里使用了
scss
声明一些变量
和mixin
, 可根据自身要求修改
- wh: 宽高, sc: 字体、颜色 , fcc: flex水平垂直居中, borderRadius: 圆角
.storeList {
@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;
@include wh(180rpx, 100%);
flex: 0 0 180rpx;
.menu-item {
@include wh(100%, 100rpx);
@include fcc;
@include sc(26rpx, $fc);
}
.active {
color: #fe2945;
background: $white;
}
}
.prodeuct-wrapper {
flex: 1;
height: 100%;
.product {
width: 100%;
}
.title {
font-weight: bold;
@include sc(30rpx, $fc);
padding: 20rpx;
}
.goods-box {
display: flex;
flex-wrap: wrap;
}
.goods-item {
width: calc(100% / 3);
@include fc;
flex-direction: column;
margin-bottom: 30rpx;
.goods-img {
@include wh(150rpx, 150rpx);
@include borderRadius(6rpx);
}
.goods-name {
@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;
}
数据结构效果图
临时测试数据,仅供参考