左侧导航栏与右侧商品列表相互联动,类似喜茶这种联动效果
image.png
实现思路:
1.使用组件scroll-view的属性scroll-into-view(值应为某子元素id,id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素),实现点击左侧导航分类,右侧滑动到相应商品(这个比较简单,调动API即可实现)
2.使用组件scroll-view的bindscroll事件(滚动时触发)获取右侧商品列表父元素scroll-view卷上去的高度e.detail.scrollTop,使用wx.createSelectorQuery()和boundingClientRect方法(添加节点的布局位置的查询请求)获取右侧商品列表里每一块子元素节点的高度(height)和距离父元素上边界距离(上边界坐标top),右侧列表滚动时,遍历右侧商品列表项,当父元素卷上去的高度>=子元素上边界坐标,并且<=子元素上边界坐标加子元素的高度时,获取当前区域的商品分类id,赋值给左侧选中项id
具体代码:
<!-- wxml -->
<view class="cotent">
<!-- 左侧tab菜单栏 -->
<scroll-view class="leftTabBox clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" style="height:100%">
<block wx:for="{{leftClassesMenuList}}" wx:key="{{item.id}}">
<button formType="submit" class="{{selectedLeftMenuItem == item.id?'leftTab-selectedItem':'leftTab-items'}}" bindtap="{{selectedLeftMenuItem == item.id?'':'selectClassesClick'}}" hover-class='none' data-index="{{index}}" data-id="{{item.id}}">
<view class="leftTab-nameBox">{{item.name}}</view>
</button>
</block>
</scroll-view>
<!-- 右侧商品列表 -->
<scroll-view class="bigWrap productList clearFix" scroll-with-animation="true" enable-back-to-top="true" scroll-y="true" scroll-top="{{scrollTop}}" style="height:100%" bindscrolltolower="loadMore" scroll-into-view="{{toView}}" scroll-with-animation="true" bindscroll="scrollProductList">
<view wx:for="{{productList}}" id="{{'productItem'+item.cateId}}" wx:key="{{index}}">
<view class="classesTitle">{{item.cateName}}</view>
<view class="product-item clearFix" data-item="{{goodsItem}}" bindtap='showGoodsDetail'>
<image class="product-image" src="{{goodsItem.goodsImgUrl}}" mode="aspectFit" />
<view class="product-content">
<view class="product-title">{{goodsItem.goodsName}}</view>
<text class="product-price">¥{{goodsItem.goodsPayprice}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- js -->
var that;
Page({
data:{
// 左侧菜单列表
leftClassesMenuList: [],
// 左侧菜单选中item
selectedLeftMenuItem: "",
// 商品列表
productList: [],
//把右侧第几个商品分类滚动到顶部
toView:"",
},
onload: function(options) {
that = this;
},
// 获取右侧商品列表
getProductList: function() {
let currentUrl;
let currentParams;
// util文件里封装了get请求
util.getRequest(currentUrl, currentParams, res => {
let dataSource = res.data.data.goods;//右侧商品列表
let leftClassesMenuList = res.data.data.categoryList;//左侧分类列表
that.setData({
productList: dataSource,
leftClassesMenuList: leftClassesMenuList,
selectedLeftMenuItem: leftClassesMenuList[0] ? leftClassesMenuList[0].id:'',//默认左侧第一个选中
toView: leftClassesMenuList[0] ? 'productItem' + leftClassesMenuList[0].id:''
})
// 给右侧商品列表循环赋值列表项的上边界坐标和高度
that.data.productList.forEach(item => {
// 添加节点的布局位置的查询请求
wx.createSelectorQuery().select('#productItem' + item.cateId).boundingClientRect(rect => {
item.offsetTop = rect.top;
item.height = rect.height;
}).exec()
})
console.log(that.data.productList, "that.data.productList")
})
},
// 左侧菜单栏切换事件
selectClassesClick: function(e) {
let dataset = e.currentTarget.dataset;
let id = dataset.id;
that.setData({
selectedLeftMenuItem: id,
toView: 'productItem' + id //不能数字开头,所以开头加了productItem
});
},
// 监听右边商品列表滑动
scrollProductList(e){
console.log(e)
that.data.productList.forEach(item => {
if (e.detail.scrollTop >= (item.offsetTop - 55) && e.detail.scrollTop <= (item.offsetTop - 55 + item.height)){
that.setData({
selectedLeftMenuItem: item.cateId
})
}
})
},
})
网友评论