本文实例为大家分享了微信小程序实现锚点跳转的具体代码，供大家参考，具体内容如下
1、先上效果图，看看是不是你想要的。
2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。
3、wxml代码：
1标签 2标签 3标签 4标签 5标签 1标签对应内容区域 2标签对应内容区域 3标签对应内容区域 4标签对应内容区域 5标签对应内容区域
4、wxss代码：
.text{
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-x-view {
width: 100%;
display: flex;
flex: 1;
}
.scroll-x-view .scroll-view-item {
margin-top: 50rpx;
width: 750rpx;
height: 800rpx;
display:inline-block;
}
.bg_red {
background: lightpink;
}
.bg_blue {
background: lightblue;
}
.bg_green {
background: lightgreen;
}
.bg_yellow {
background: lightyellow;
}
.scroll-x-view1 {
width: 100%;
height: 100rpx;
white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
width: 400rpx;
height: 100rpx;
display:inline-block;
}
5、js代码：
Page({
data: {
// 标签锚点跳转值
indexMaodian: 'a',
// 标签详情内容锚点跳转
storeDetail: 'a1'
},
// 监听页面滑动距离
onPageScroll(e) {
// 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
var height = Number(e.detail.scrollTop)
if (height <= 400) {
// 滑到1区域
this.setData({
indexMaodian: 'a'
});
} else if (height > 400 && height<= 800) {
// 滑到2区域
this.setData({
indexMaodian: 'b'
});
} else if (height > 800 && height <= 1200) {
// 滑到3区域
this.setData({
indexMaodian: 'c'
});
} else if (height > 1200 && height <= 1600) {
// 滑到4区域 后面难得写了，以此类推即可
this.setData({
indexMaodian: 'd'
});
}
},
// 跳转到对应的标签详情内容区
toDetail(e) {
let id = e.target.dataset.id
this.setData({
storeDetail: id
})
},
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;
// 拿到导航栏以下可视区域的高度
this.setData({
height: windowHeight
});
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
