废话少说，其实就是利用scroll-into-view的id值来进行视图进行的滚动，注意不是选项卡效果，是页面的滚动的效果，相当于html的锚点链接效果。
效果：
sp200917_205731.png
html代码：
<!-- 轮播图 -->
<banner-block swipeArr="{{swipeArr}}" />
<view class="main">
<!-- 左边导航栏 -->
<scroll-view scroll-y="true" scroll-into-view="{{leftId}}" class="left">
<view wx:for="{{menuArr}}" wx:key="*this" data-myid="{{item.id}}" id="left{{item.id}}" class="scroll-view-item {{lifeActiveNum==item.id?'active':''}} " bindtap="leftClick">
{{item.title}}</view>
</scroll-view>
<!-- 右边 -->
<scroll-view scroll-y="true" class="right" scroll-with-animation="true" bindscroll="rightScrollTop" scroll-into-view="{{rightId}}"
>
<view wx:for="{{menuArr}}" wx:key="*this" id="right{{item.id}}" class="scroll-view-item rightblock " >
<view class="right_title" >{{item.title}}</view>
<view class="right-flex" >
<view class="content" wx:for="{{item.subArr}}" wx:key="*this">
<image src="{{item.imgSrc}}" mode="widthFix"></image>
<text>{{item.imgDesc}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
css:
.main {
background: #efefef;
height: calc(100vh - calc(100vw/1080*520));
width: 100vw;
}
.left {
width: 25%;
float: left;
border-right: 1px solid #666;
height: calc(100vh - calc(100vw/1080*520));
box-sizing: border-box;
}
.left view{
border-bottom: 1rpx solid #666;
background: #fff;
height: 80rpx;
line-height: 80rpx;
text-align: center;
position: relative;
}
.left view::before{
content: '';
background: #fff;
/* border-left: 8rpx; */
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 8rpx;
}
.left view.active::before{
background: #333999;
}
.right{
float: right;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 75%;
padding: 0 10rpx;
/* background: #efefefef; */
box-sizing: border-box;
height: calc(100vh - calc(100vw/1080*520));
}
.right .title{
height: 40rpx;
line-height: 40rpx;
}
.content {
background: #fff;
width: 32%;
padding: 10rpx;
box-sizing: border-box;
text-align: center;
margin-top: 10rpx;
}
.content image{
width: 90%;
}
.content text{
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
}
.right-flex{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.right_title{
height: 60rpx;
line-height: 60rpx;
}
js:
Page({
data: {
swipeArr: ['/images/banner/menubanner1.jpg', '/images/banner/menubanner2.jpg', '/images/banner/menubanner3.jpg'],
menuArr: [{
"id": 0,
"title": "人气Top",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "拿铁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "桃桃芝士红宝石"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "咖啡风味安慕希"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "陨石拿铁"
}
]
},
{
"id": 1,
"title": "大师咖啡",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "冲绳黑糖拿铁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "陨石拿铁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "拿铁"
}
]
},
{
"id": 2,
"title": "小鹿茶精选",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "标准美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "加浓美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "焦糖标准美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "焦糖加浓拿铁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "银河气泡美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "银河气泡美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "银河气泡美式"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "银河气泡美式"
}
]
},
{
"id": 3,
"title": "瑞纳冰",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "乐岛桃桃冰"
}]
},
{
"id": 4,
"title": "鲜榨果蔬汁",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "NFC鲜榨橙汁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "NFC鲜榨西柚汁"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "猕猴桃复合果汁"
}
]
},
{
"id": 5,
"title": "经典饮品",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "巧克力"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "纯牛奶"
}
]
},
{
"id": 6,
"title": "健康轻食",
"subArr": [{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "京味烤鸭鲜蔬卷"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "夏威夷菠萝火山卷"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "火腿芝士羊角"
},
{
"imgSrc": "/images/menu/1-1.jpg",
"imgDesc": "鸡肉卷"
}
]
}
],
//
leftId: "left0",
rightId: "right0",
lifeActiveNum: 0,
heightArr: []
},
leftClick(e) {
this.setData({
lifeActiveNum: e.target.dataset.myid,
leftId: "left" + e.target.dataset.myid,
rightId: "right" + e.target.dataset.myid
})
},
// vue中的mounted也没有说白分白的组件熏染完成
onReady() {
let _this = this
setTimeout(() => {
let initArr = [0]; //初始数组
let initNum = 0; //初始数值
const query = wx.createSelectorQuery()
query.selectAll('.rightblock').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
console.log(res[0]);
res[0].map(val => {
initNum += val.height; //实现高度的累加
initArr.push(initNum) //初始数值加进数组中
})
console.log(initArr); //拿到每一个height 存起来
_this.setData({
heightArr: initArr
})
})
}, 300)
},
// 右边滚动事件
rightScrollTop(e){
let st=e.detail.scrollTop;
let myarr=this.data.heightArr;
for(let i=0;i<myarr.length;i++){
if(st>=myarr[i]&&st<myarr[i+1]-10){
this.setData({
leftId:"left"+i,
lifeActiveNum:i
})
return;
}
}
}
})
