这个是需要实现的效果（点击上面的标签自动滚动到相应内容，滚动内容也会自动切换上面的标签）
34382146037140_.pic.jpg
先来看一下代码：
js文件中Page里定义数据（上面需要显示的标签内容）：
data: {
current: {
menu: 1
},
menus: [{
id: 1,
text: '房间',
active: true,
scrollSubviewId: "roomList",
hidden: false,
},
{
id: 2,
text: '美宿介绍',
active: false,
scrollSubviewId: "introduce",
hidden: false,
},
{
id: 3,
text: '独一份',
active: false,
scrollSubviewId: "mall",
hidden: true,
},
{
id: 4,
text: '推荐',
active: false,
scrollSubviewId: "recommend",
hidden: true,
},
{
id: 5,
text: '热评',
active: false,
scrollSubviewId: "comment",
hidden: true,
}
],
top: 0,
},
wxml文件中代码
<view class="top-tab">
<block wx:for="{{menus}}" wx:key="menu.list">
<view class="top-tab-item{{item.active ? ' active' : ''}}" bindtap="scrollToView" data-item="{{item}}" hidden='{{item.hidden}}'>{{item.text}}</view>
</block>
</view>
scrollToView: function(e) {
var item = e.currentTarget.dataset.item || {};
var menus = this.data.menus;
menus.forEach((f) => {
if (f.id == item.id)
f.active = true;
else
f.active = false;
});
this.setData({
menus: menus,
'current.menu': item.id,
toView: item.scrollSubviewId,
tapMenu: true
});
},
scrollDidScroll: function(e) {
var top = e.detail.scrollTop;
if (top > 20) {
if (!this.data.showBackTopView) {
this.setData({
showBackTopView: true,
});
}
} else {
if (this.data.showBackTopView) {
this.setData({
showBackTopView: false,
});
}
}
if (this.data.tapMenu) {
this.setData({
tapMenu: false,
});
return;
}
var introduceTop = this.data.introduceTop;
var mallTop = this.data.mallTop || (introduceTop + this.data.introduceHeight);
var recommendTop = this.data.recommendTop || (mallTop + this.data.mallHeight);
var commentTop = this.data.commentTop || (recommendTop + this.data.recommendHeight);
var id = 1;
if (top > commentTop) {
id = 5;
}
if (this.data.recommendHeight > 0) {
if (top > recommendTop && top < (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY)) {
id = 4;
}
}
if (this.data.mallHeight > 0) {
if (top > mallTop && top < (this.data.recommendHeight > 0 ? recommendTop : (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY))) {
id = 3;
}
}
if (top > introduceTop && top < (this.data.mallHeight > 0 ? mallTop : (this.data.recommendHeight > 0 ? recommendTop : (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY)))) {
id = 2;
}
if (top < introduceTop && top > 0) {
id = 1;
}
if (this.data.current.menu != id) {
var menus = this.data.menus;
menus.forEach((f) => {
if (f.id == id)
f.active = true;
else
f.active = false;
});
this.setData({
menus: menus,
'current.menu': id
});
}
},
getTops: function() {
var that = this;
var menus = this.data.menus;
for (let i = 0; i < menus.length; i++) {
if (!menus[i].hidden) {
var query = wx.createSelectorQuery() //创建节点查询器
let floorID = '#' + menus[i].scrollSubviewId;
query.select(floorID).boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res) {
if (res[0]) {
var result = res[0];
if (result.id == 'introduce') {
that.setData({
introduceTop: result.top,
introduceHeight: result.height || 0,
});
} else if (result.id == 'mall') {
that.setData({
mallTop: result.top,
mallHeight: result.height || 0,
});
} else if (result.id == 'recommend') {
that.setData({
recommendTop: result.top,
recommendHeight: result.height || 0,
});
} else if (result.id == 'comment') {
that.setData({
commentTop: result.top,
commentHeight: result.height || 0,
});
}
}
})
}
}
},
