nav.xml
-------------------------------------------------------------------------------------------------------------
<!--pages/nav/nav.wxml-->
<view class='nav-container'>
<view class='navTitle'>{{navTitle}}</view>
<scroll-view scroll-y style="height: 1500rpx" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class='navBox'>
<view class='title'>{{title1}}</view>
<view class='title titleRed'>{{title2}}</view>
<view class='title titleOrange'>{{title3}}</view>
<view class='titleBottom'></view>
</view>
</scroll-view>
</view>
-------------------------------------------------------------------------------------------------------------
nav.wxss
-------------------------------------------------------------------------------------------------------------
.navTitle{width:100%;height:50px;background:#ccc;line-height:50px;padding-left:30rpx;color:green;position:fixed;top:0;z-index: 10;}
.title{height:1000rpx;background:green;padding-left:30rpx;margin-top:60px;}
.titleBottom{height:100rpx;}
.titleRed{background:red;}
.titleOrange{background:orange;}
.titlePink{background:pink;}
-------------------------------------------------------------------------------------------------------------
nav.js
-------------------------------------------------------------------------------------------------------------
Page({
/**
* 页面的初始数据
*/
data: {
toView: 'red',
scrollTop: 0,
navTitle: "导航",
title1: "标题1",
title2: "标题2",
title3: "标题3"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
scroll: function (e) {
// console.log(e)
// console.log(e.detail.scrollTop);
const scrollTop = e.detail.scrollTop;
var query = wx.createSelectorQuery();//创建选择器
var that = this;
console.log("滚动值：" + scrollTop);
query.selectAll('.title').boundingClientRect(function (rect) {
rect[0].title = "标题1"
rect[1].title = "标题2"
rect[2].title = "标题3"
// var title1 = rect[0].top;
rect[1].top = rect[1].top + 400;
rect[2].top = rect[2].top + 760;//可以调整
for(var i = 0; i < rect.length; i++)
{
if(scrollTop >= rect[i].top)
{
that.setData({
navTitle: rect[i].title
})
}
}
}).exec();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})