小程序scroll-view左右滑动联动效果
效果图
<view class='cont-pro'>
<scroll-view scroll-y='true' scroll-with-animation="true" style="width:25%;">
<view class='pro_left'>
<view wx:for="{{serviceTypes}}" wx:key='index' class="pro_title {{index==currentLeft?'select':''}}" bindtap='proItemTap' data-pos='{{index}}'>{{item.type}}view>
view>
scroll-view>
<scroll-view scroll-y='true' style="width:75%;" scroll-with-animation="true" scroll-into-view="{{selectId}}" bindscroll="scroll" scroll-top="{{scrollTop}}">
<view class='pro_right'>
<view id='{{"item"+index}}' class='pro_box' wx:for="{{serviceTypes}}" wx:for-index="index" wx:key='index' wx:for-item="item">
<view class="item_title">{{item.type}}view>
<view class='pro_item' wx:for="{{item.services}}" wx:for-index="idx" wx:key='idx' wx:for-item="itemName">
<image class='pro_img' src='{{itemName.img}}'>image>
<view class='pro_text'>
<view class='item_name'>{{itemName.name}}view>
view>
view>
view>
view>
scroll-view>
view>
var app = getApp();
Page({
heightArr: [],
distance: 0,
data: {
currentLeft: 0, //左侧选中的下标
selectId: "item0", //当前显示的元素id
scrollTop: 0, //到顶部的距离
serviceTypes: [
{
type:"标签1",
services:[
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
}
]
},
{
type:"标签2",
services:[
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
}
]
},
{
type:"标签3",
services:[
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
}
]
},
{
type:"标签4",
services:[
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
}
]
},
{
type:"标签5",
services:[
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
},
{
img:"https://sucai.suoluomei.cn/sucai_zs/images/2020/07/09/a46a0c7da07765be4454817b8c6fc6a2.jpg",
name:"商品标题",
}
]
}
], //项目列表数据
staffList: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.selectHeight();
},
// 左侧标签选择操作锚点定位
proItemTap(e) {
this.setData({
currentLeft: e.currentTarget.dataset.pos,
selectId: "item" + e.currentTarget.dataset.pos
})
},
//计算右侧每一个分类的高度，在数据请求成功后请求即可
selectHeight() {
let that = this;
this.heightArr = [];
let h = 0;
const query = wx.createSelectorQuery();
query.selectAll('.pro_box').boundingClientRect()
query.exec(function(res) {
res[0].forEach((item) => {
console.log(item,res[0])
h += item.height;
that.heightArr.push(h);
})
console.log(that.heightArr);
})
},
//监听scroll-view的滚动事件
scroll(event) {
if (this.heightArr.length == 0) {
return;
}
let scrollTop = event.detail.scrollTop;
let current = this.data.currentLeft;
if (scrollTop >= this.distance) {
//页面向上滑动
//如果右侧当前可视区域最底部到顶部的距离 超过 当前列表选中项距顶部的高度（且没有下标越界），则更新左侧选中项
if (current + 1 < this.heightArr.length && scrollTop >= this.heightArr[current]) {
this.setData({
currentLeft: current + 1
})
}
} else {
//页面向下滑动
//如果右侧当前可视区域最顶部到顶部的距离 小于 当前列表选中的项距顶部的高度，则更新左侧选中项
if (current - 1 >= 0 && scrollTop < this.heightArr[current - 1]) {
this.setData({
currentLeft: current - 1
})
}
}
//更新到顶部的距离
this.distance = scrollTop;
}
})
.cont-pro {
height: 100%;
display: flex;
background-color: #fff;
flex-direction: row;
}
.pro_left {
width: 100%;
background-color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
border-right: 1rpx solid#eee;
}
.pro_title {
width: 100%;
height: 150rpx;
line-height: 150rpx;
text-align: center;
border-bottom: 1rpx solid #eee;
}
.select {
width: 100%;
height: 150rpx;
line-height: 150rpx;
text-align: center;
color: #fff;
background: #f08d31;
}
.pro_right {
width: 100%;
background-color: #fff;
height: 100vh;
}
.item_title {
width: 100%;
height: 50px;
line-height: 100rpx;
padding: 0 30rpx;
box-sizing: border-box;
}
.item_name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
}
.pro_item {
width: 100%;
display: flex;
padding: 30rpx;
box-sizing: border-box;
}
.pro_img {
width: 160rpx;
height: 160rpx;
flex-basis: 160rpx;
flex-shrink: 0;
border-radius: 4rpx;
margin-right: 30rpx;
background-color: #f5f5f5;
}
.pro_text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}