菜单栏 scroll-view实现左右联动效果 锚点定位
2021-12-28 本文已影响0人
潇潇芭蕉
友侧根据左侧点击滑动到对应模块，左侧根据右侧滑动对应到相应标题，实现scroll-view滚动到某个view，左侧菜单相应会出现选中状态的效果
微信图片_20211228154522.png
<view class="container">
<view class="category-left">
<scroll-view scroll-y="true" style="height:100%">
<block wx:for="{{category}}" wx:key="id">
<view class="catgegory-item {{activeId === item.id?'active-item':''}}" id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
</block>
</scroll-view>
</view>
<view class="category-right">
<!-- height建议动态获取如wx.getSystemInfoSync().windowHeight -->
<scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
<view class="categoty-detail">
<block wx:for="{{content}}" wx:key="id">
<view class="catefory-main">
<view class="category-title" id="{{item.id}}">{{item.title}}</view>
<view class="category-content">
<view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
<image src="{{i.src}}"></image>
<text>{{i.text}}</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
Page({
data: {
toView: 'a1',
activeId: 'a1',
category: [
{name: '物品1', id: 'a1'},
{ name: '物品2', id: 'a2' },
{ name: '物品3', id: 'a3' },
{ name: '物品4', id: 'a4' },
{ name: '物品5', id: 'a5' },
{ name: "物品6", id: 'a6' },
{ name: '物品7', id: 'a7'},
{ name: '物品8', id: 'a8' },
],
content: [
{
title: '- 物品1 -',
options: [
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto',id: '001',text: 're734'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '002', text: 'red73'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '003', text: '734'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '004', text: 're7349'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '005',text: 're7349'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto',id: '001',text: 're7349'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '002', text: 'red734'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '003', text: '7349f'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '004', text: 're7349'},
{ src: 'https://img1.baidu.com/it/u=3241726235,4137540402&fm=26&fmt=auto', id: '005',text: 're7349f'}
],
id: 'a1'
},
{
title: '- 物品2 -',
options: [
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '006', text: '111111' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '007' ,text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '008', text: '23r32rr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '009',text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '006', text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '007', text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '008', text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '009', text: 'r23r32rr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '007', text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '008', text: '23r32rrr'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '009', text: '23r32rrr' },
],
id: 'a2'
},
{
title: '- 物品3 -',
options: [
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '006', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '007', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '008', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '009', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '006', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '007', text: 'rfhjksd'},
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '008', text: 'fhjksdh' },
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '009', text: 'fhjksdh' }
],
id: 'a3'
},
{
title: '- 物品4 -',
options: [
{ src: 'https://img1.baidu.com/it/u=1017735198,80275548&fm=26&fmt=auto', id: '006', text: 'fhjksdh' },
],
id: 'a4'
},
],
},
onLoad: function () {
this.setData({
toView: 'a1',
heightArr: []
})
//如是接口返回数据 此处可加一个定时器 不然会获取不到数据
let query = wx.createSelectorQuery();
query.selectAll('.catefory-main').boundingClientRect((rect)=> {
rect.forEach(res=> {
//console.log(res.height)
this.calculateHeight(res.height);
})
}).exec();
},
// 滚动长度
calculateHeight(height) {
if(!this.data.heightArr.length) {
this.data.heightArr.push(height)
}else {
this.data.heightArr.forEach( => {
height += res
})
this.data.heightArr.push(height);
}
},
clickItem(e) {
this.setData({
activeId: e.currentTarget.id,
toView: e.currentTarget.id
})
},
scroll(e) {
let scrollHeight = e.detail.scrollTop+5;
let index = this.calculateIndex(this.data.heightArr,scrollHeight);
this.setData({
activeId: 'a'+index
})
},
// 计算左边选中的下标
calculateIndex(arr, scrollHeight) {
let index= '';
for(let i =0;i<arr.length;i++) {
if (scrollHeight >= 0 && scrollHeight < arr[0]){
index = 0;
}else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
index = i;
}
}
return index+1;
}
})
.container {
padding: 0;
width:100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.category-left {
height: 100%;
width: 22%;
padding: 0 20rpx;
box-sizing: border-box;
border-right: 1px solid #efefef;
}
.catgegory-item {
padding: 20rpx 0;
font-size: 30rpx;
text-align: center;
}
.active-item {
color: orange;
}
.category-right {
flex:1;
height: 100%;
}
.category-content {
display: grid;
grid-template-columns: repeat(auto-fill, 190rpx);
}
.category-title {
text-align: center;
}
.content-item {
display: flex;
flex-direction: column;
padding: 20rpx;
text-align: center;
font-size: 30rpx;
}
.content-item image {
width: 100%;
height: 140rpx;
}
